Оптимизация События Выборки jQuery FullCalendar

Я задавался вопросом, мог ли кто-то дать мне некоторые подсказки, чтобы помочь оптимизировать мой jQuery Полный Календарный Код. Проблема, с которой я сталкиваюсь, - когда я выбираю много событий через Ajax (> 25), браузер останавливается и становится безразличным обычно получающийся в сообщении пользователю для прерывания сценария. Я стараюсь избегать этой ошибки, и я задавался вопросом, было ли что-то, что я мог бы сделать в своей функции для улучшения времени загрузки.

Вот копия функции, которую я выполняю:

//Load the Business Unit Calendar Events
function ajaxBUEvents(start, end){
    //Loop through the selected checked calendars
    $(selectBUCalendars()).each(function(i, cal){
        $.ajax({
            type: 'POST',
            data: {'startDate': start, 'endDate': end, 'buCals[]': cal}, 
            url: '<?= site_url('AJAX/calendar_ajax/get_cal_events'); ?>', 
            dataType: 'json',
            async: false,
            beforeSend: function(){
                $('#loading-dialog').dialog({minHeight: 100, width: 250}).dialog('open');
                $('#loading-dialog p').text('Loading '+cal+' Calendar Events');
            }, 
            success: function(calevents){
                $.each(calevents, function(i, calevent){
                    $('#calendar').fullCalendar('renderEvent', calevent, true); 
                }); 
            }
        });
    }); 
    $('#loading-dialog').dialog('close');
}

И вот образец JSON, который возвращается, это - только одно событие. Иногда может быть 50 + возвращенные события:

[{"id":4377,"title":"BWR - Lighting Affiliates Dinner - Actualized","start":1259874000,"end":1259888400,"className":"BWR Actualized","allDay":false,"editable":false}]

Спасибо за справку!

5
задан whobutsb 17 December 2009 в 20:27
поделиться

1 ответ

The trick is to use addEventSource instead of renderEvent. Because with renderEvent your whole calendar is redrawn for every single event you add. While addEventSource adds all events from the source you provide and then does a single redraw of the calendar.

success: function(calevents){
    $('#calendar').fullCalendar('addEventSource', calevents); 
}

I even made two demopages for you, so you can check the difference in performance.

The slow version adds 50 events via renderEvent (note how whole the calendar is redrawn for every event)

http://jsbin.com/ewuka

The fast version adds 50 events via addEventSource (note how the calendar only gets redrawn for once)

http://jsbin.com/udode

14
ответ дан 18 December 2019 в 13:15
поделиться
Другие вопросы по тегам:

Похожие вопросы: