jQuery फुल कैलेंडर फ़ेच इवेंट ऑप्टिमाइज़ेशन

Question

मैं सोच रहा था कि कोई मुझे मेरे 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}] 

सहायता के लिए धन्यवाद!

Answer 1

चाल renderEvent के बजाय addEventSource का उपयोग करना है। क्योंकि renderEvent के साथ आपका पूरा कैलेंडर आपके द्वारा जोड़े जाने वाले प्रत्येक ईवेंट के लिए फिर से खींचा जाता है। जबकि addEventSource आपके द्वारा प्रदान किए जाने वाले स्रोत से सभी ईवेंट जोड़ता है और फिर कैलेंडर का एक एकल रेड्रॉव करता है।

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

---

मैं भी तो तुम प्रदर्शन में अंतर की जांच कर सकते हैं, तो आप के लिए दो demopages बनाया है।

धीमी संस्करण renderEvent के माध्यम से 50 घटनाओं कहते हैं (ध्यान दें कैसे पूरे कैलेंडर हर घटना के लिए दोबारा बनाई है)

http://jsbin.com/ewuka

तेज संस्करण addEventSource (ध्यान दें कैसे कैलेंडर के लिए ही फिर से ताज़ा हो जाता है के माध्यम से 50 घटनाओं कहते हैं एक बार)

http://jsbin.com/udode