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獲取事件優化

回答

相關問題