Оптимизация событий получения jQuery FullCalendar - PullRequest
Новая
       16

Оптимизация событий получения jQuery FullCalendar

5 голосов
/ 17 декабря 2009

Мне было интересно, может ли кто-нибудь дать мне несколько советов, которые помогут оптимизировать мой полный календарный код 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}]

Спасибо за помощь!

1 Ответ

15 голосов
/ 18 декабря 2009

Хитрость в том, чтобы использовать addEventSource вместо renderEvent. Потому что с renderEvent весь ваш календарь перерисовывается для каждого добавляемого вами события. Хотя addEventSource добавляет все события из предоставленного вами источника, а затем выполняет однократную перерисовку календаря. 

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

Я даже сделал два демопажа для вас, чтобы вы могли проверить разницу в производительности.

Медленная версия добавляет 50 событий через renderEvent (обратите внимание, как весь календарь перерисовывается для каждого события)

http://jsbin.com/ewuka

Быстрая версия добавляет 50 событий через addEventSource (обратите внимание, что календарь перерисовывается только один раз)

http://jsbin.com/udode

...