6

我想知道是否有人可以给我一些建议来帮助优化我的 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}]

感谢您的帮助！

4

1 回答 1

15

诀窍是使用addEventSource而不是renderEvent. 因为renderEvent您添加的每个事件都会重新绘制整个日历。虽然 addEventSource 从您提供的源添加所有事件，然后对日历进行一次重绘。

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

我什至为您制作了两个演示页面，以便您检查性能差异。

慢版本通过 renderEvent 添加了 50 个事件（注意每个事件如何重绘整个日历）

http://jsbin.com/ewuka

快速版本通过 addEventSource 添加 50 个事件（注意日历如何只重绘一次）

http://jsbin.com/udode

于 2009-12-18T00:49:44.170 回答