jQuery FullCalendar获取事件优化

我想知道是否有人可以给我一些指针来帮助优化我的jQuery完整日历代码。我遇到的问题是，当我通过AJAX（> 25）获取大量事件时，浏览器停滞并且无响应，通常会导致向用户发送消息以中止脚本。我试图避免这个错误，并且我想知道在我的函数中是否有一些东西可以改善加载时间。jQuery FullCalendar获取事件优化

这里是我运行功能的副本：

//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}]

感谢您的帮助！

来源

2009-12-17 whobutsb

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

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

我甚至做了两个demopages你，所以你可以检查在性能上的差异。

缓慢的版本增加了通过renderEvent 50个事件（注意日历的全部重绘每一个事件）

http://jsbin.com/ewuka

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

http://jsbin.com/udode

来源

2009-12-18 00:49:44 jitter

OMG，这非常有意义！我完全忽略了这个功能，并且我不知道renderEvent每次都会重写日历。这太好了，我等不及明天在工作中试试这个。非常感谢您的演示页面和解释！ – whobutsb 2009-12-18 04:23:22

顺便说一句JSBIN很甜！我迫不及待想要多用一些。 – whobutsb 2009-12-18 04:28:21

所以我刚刚实现了addEventSource，它绝对提高了日历的性能。我现在遇到的唯一问题是它为每个返回的事件添加了一个重复的事件。所以如果返回3个事件，那么在屏幕上有6个事件。 – whobutsb 2009-12-18 14:39:27

jQuery FullCalendar获取事件优化

回答

相关问题