在月视图中每周(或每个区块)启用一个请求

Question

我继承维护的一个应用程序在尝试为Fullcalendar渲染加载事件JSON流时超时。

我希望我能得到批准，投入更多的计算资源来解决这个问题，但除此之外，我很难弄清楚如何解决这个问题。

我的一个想法是将数据请求分成更小的部分，一次请求1周的数据（而不是1个月）。

这似乎是可行的，但我不知道如何捕捉时间框架的变化，将其分割成更小的块，然后从中发出多个请求，而不是一个。

Answer 1

您似乎在试图绕过主要问题，即为什么会超时由于不知道太多细节，它可能很简单，因为数据库索引或服务器上的其他进程消耗了太多资源。我建议您配置数据库和框架/服务器以解决此问题。

也就是说，你可以做两件事：

1. 禁用month视图可强制FullCalendar使用agendaWeek或agendaDay。类似这样的东西：

   $('#calendar').fullCalendar({
       header: {
           left: 'prev,next',
           center: 'title',
           right: 'agendaWeek,agendaDay'
       },
       defaultView: 'agendaWeek'
   });
   

   请参见示例。

2. 如果您确实需要month视图，可以将events用作函数。您必须计算一个月中每一周的开始和结束日期，然后调用回调。类似这样的东西：

   $('#calendar').fullCalendar({
       events: function(start, end, timezone, callback) {
           // do this in chunks only when view is month
           if ($("#calendar").fullCalendar( 'getView' ).name == 'month') {
               // You'll need to get the start and end day of each week.
               // The parameters `start` amd `end` relate to the first day of
               // the month and the last day of the month.
               // You should get an array of objects, like this
               var weeks = [
                   {start: '2014-09-28', end: '2014-10-04'},
                   {start: '2014-10-05', end: '2014-10-11'},
                   {start: '2014-10-12', end: '2014-10-18'},
                   {start: '2014-10-19', end: '2014-10-25'},
                   {start: '2014-10-26', end: '2014-11-01'}
               ];
               // When you have that:
               for(var i in weeks) {
                   getEvents(weeks[i].start, weeks[i].end, callback);
               }
           }
           // if its another view, get all events at once
           else {
               getEvents(start, end, callback);
           }
       }
   });
   function getEvents(start, end, callback) {
       $.ajax({
           url: 'events',
           dataType: 'json',
           async: false,
           data: {
               start: start,
               end: end
           },
           success: function(events) {
               callback(events);
           }
       });
   }
   

   为了计算一周的开始和结束，你可以看看这个问题：使用jquery和moment js获取下一周的结束和开始，它应该会帮助你。

   请注意，我已将async: false添加到$.ajax中，以便一次只有一个请求。

   还要注意，这段代码适用于FullCalendar2.*。由于您谈论的是一个现有的应用程序，有些事情会有所不同。版本1.*的events文档指出签名有点不同：function( start, end, callback ) { }