延迟jQuery完整日历的JSON Feed

时间:2011-04-23 21:09:44

标签: jquery jquery-plugins fullcalendar

我注意到,如果您设置了一个事件源(即您将对服务器执行AJAX请求)并在下个月开始快速点击它将触发每个月的请求。因此,如果我快速点击以获得5次请求将会消失。

我该如何制作它只会在用户停止点击后触发。我发现这样浪费资源并可能导致错误。

1 个答案:

答案 0 :(得分:0)

你对此非常正确,我已经向开发团队提出过关于此问题的错误。

http://code.google.com/p/fullcalendar/issues/detail?id=920&can=1&sort=-id&colspec=ID%20Type%20Status%20Milestone%20Summary%20Stars

我现在想到的唯一方法就是使用viewDisaply事件。

http://arshaw.com/fullcalendar/docs/display/viewDisplay/

在viewDisapy事件中调用loading事件

http://arshaw.com/fullcalendar/docs/event_data/loading/

我现在能想到的唯一方法是使用javascript setTimeout

var t=setTimeout( FUNCTION , TIME IN MS);
超时检查中的

是isLoading,如果为true,则再次设置超时。

或者只是在viewDisplay函数中使用setTimeout到500ms / 1秒?创建所需的延迟效果,一旦超时,您可以使用addEventSource添加所需的源 http://arshaw.com/fullcalendar/docs/event_data/addEventSource/

日历中还有另一个选项。

http://arshaw.com/fullcalendar/docs/event_data/lazyFetching/

此选项告诉插件缓存所有事件。所以如果你点击下一个/下一个/上一个/上一个。它只调用ajax两次。因为前两个月已加载并缓存。

没有点击:D,因为我们不知道用户是否要再次点击..:D所以我们只需要通过设置setDelay来预测这一点,如果用户点击下个月两次在1秒内。

因此,如果有人想提前6个月,他们会快速按下下一个按钮,我们可以检测出这样的情况。

//global var

var clicks = 0;
var isClicking = false;

 //jquery on load and calender initialisation.

 loading: function(bool) { if (bool) 
            { 
                    clicks=0; //The source has loaded completely - user stopped clicking
                    }
            else 
            {
            //Still loading 
            }
        },


 viewDisplay: function(view) {
            click += 1; //user has clicked- and this will grow each time he clicks before the ajax finishes.
            if (click > 1) //Yea he is clicking and clicking.. so lets stop calling ajax.
            {
            $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx' ); //Remove the source so it stops firing on each click
            setTimeout ( $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx' ); , 1000 ); //Add the source again and it will load and fire loading(true) and reset our click counter
            }

            //Handle other view changes like month/week and date changes
            },