6

誰かが私の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のサンプルです。これは1つのイベントにすぎません。50以上のイベントが返される場合があります。

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

お手伝いありがとう！

4

1 に答える 1

15

秘訣は、addEventSourceの代わりに使用することですrenderEvent。renderEventカレンダー全体が、追加するイベントごとに再描画されるためです。addEventSourceは、指定したソースからすべてのイベントを追加してから、カレンダーを1回再描画します。

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

デモページも2つ作成したので、パフォーマンスの違いを確認できます。

遅いバージョンでは、renderEventを介して50のイベントが追加されます（イベントごとにカレンダー全体がどのように再描画されるかに注意してください）

http://jsbin.com/ewuka

高速バージョンは、addEventSourceを介して50のイベントを追加します（カレンダーが1回だけ再描画されることに注意してください）

http://jsbin.com/udode

于 2009-12-18T00:49:44.170 に答える