jQuery FullCalendar Tìm nạp Tối ưu hóa Sự kiện

Question

Tôi đã tự hỏi liệu có ai đó có thể cho tôi một số gợi ý để giúp tối ưu hóa Mã Đầy đủ Lịch jQuery của tôi không. Vấn đề tôi đang gặp phải là khi tôi tìm nạp rất nhiều sự kiện thông qua AJAX (> 25), các quầy trình duyệt và trở nên không phản hồi thường dẫn đến thông báo cho người dùng hủy bỏ tập lệnh. Tôi đang cố gắng để tránh lỗi này, và tôi đã tự hỏi nếu có một cái gì đó tôi có thể làm trong chức năng của tôi để cải thiện thời gian tải.

Dưới đây là một bản sao của hàm Tôi đang chạy:

//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'); 
} 

Và đây là một mẫu của các JSON được trả về, đây chỉ là một sự kiện. Đôi khi có thể có hơn 50 sự kiện được trả lại:

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

Cảm ơn sự giúp đỡ!

Answer 1

Bí quyết là sử dụng addEventSource thay vì renderEvent. Bởi vì với renderEvent toàn bộ lịch của bạn được vẽ lại cho mỗi sự kiện bạn thêm. Mặc dù addEventSource thêm tất cả các sự kiện từ nguồn bạn cung cấp và sau đó thực hiện lại một lần vẽ lại lịch.

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

---

Tôi thậm chí còn thực hiện hai demopages cho bạn, vì vậy bạn có thể kiểm tra sự khác biệt trong hoạt động.

Phiên bản chậm thêm 50 sự kiện thông qua renderEvent (lưu ý cách toàn bộ lịch được vẽ lại cho mỗi sự kiện)

http://jsbin.com/ewuka

Phiên bản nhanh thêm 50 sự kiện thông qua addEventSource (lưu ý cách lịch chỉ được vẽ lại cho một lần)

http://jsbin.com/udode