jQuery FullCalendar Fetch Optimisation de l'événement

Question

Je me demandais si quelqu'un pouvait me donner quelques conseils pour vous aider à optimiser mon jQuery Code Calendrier complet. La question que je suis en cours d'exécution en est quand je vais chercher beaucoup d'événements par AJAX (> 25), les étals du navigateur et ne répond entraîne en général un message à l'utilisateur d'interrompre le script. J'essaie d'éviter cette erreur, et je me demandais s'il y avait quelque chose que je pouvais faire dans ma fonction pour améliorer le temps de chargement.

Voici une copie de la fonction que je suis en cours d'exécution:

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

Et voici un échantillon du JSON qui est retourné, c'est un seul événement. Parfois, il peut y avoir plus de 50 événements renvoyés:

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

Merci pour l'aide!

Answer 1

L'astuce consiste à utiliser addEventSource au lieu de renderEvent. Parce qu'avec renderEvent votre calendrier entier est redessinée pour chaque événement que vous ajoutez. Alors que addEventSource ajoute tous les événements de la source que vous fournissez et fait alors un nouveau tracé du calendrier.

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

---

J'ai même fait deux demopages pour vous, afin que vous puissiez vérifier la différence de performance.

La version lente ajoute 50 événements via renderEvent (notez comment tout le calendrier est redessinée pour chaque événement)

http://jsbin.com/ewuka

La version rapide ajoute 50 événements via addEventSource (notez comment le calendrier ne se redessinée pour une fois)

http://jsbin.com/udode