jquery - fullcalendar-无法缓存 AJAX 调用的 JSON 响应

Question

我正在关注这个问题Fullcalendar JSON Feed Caching

我想做的是类似的事情。我有一个完整的日历(仅启用了月 View ，因此我猜懒惰的获取将不起作用)。在月 View 中，我显示用户的出勤信息。因此，当用户转到另一个月份(假设 11 月)时，会启动 AJAX 调用并返回该月的出勤情况，如果用户转到另一个月份(假设 12 月)，也会获取该月的出勤情况。

问题是，当用户再次返回到 11 月时，AJAX 调用会再次被调用。所以我必须再次获取数据。我试图避免这种情况，因为计算出勤率并返回 JSON 响应需要 25 秒。因此，我正在尝试缓存响应。

这是 JSON 的片段。

{  
   "attendance":[  
      {  
         "backgroundColor":"#f56954",
         "borderColor":"#f56954",
         "start":"2017-01-01",
         "end":"2017-01-01",
         "title":"Absent",
      },
      {  
         "backgroundColor":"#f56954",
         "borderColor":"#f56954",
         "start":"2017-01-02",
         "end":"2017-01-02",
         "title":"Absent",
      }
   ],
   "leaves":[  

   ]
}

我按照该问题中提供的答案进行了缓存事件，但它不起作用。我不知道为什么。

这是我的完整日历代码。

    /* initialize the calendar ----*/
    //Date for the calendar events (dummy data)
    var date = new Date();
    var d = date.getDate(),
      m = date.getMonth(),
      y = date.getFullYear();
    var dateofMonth = y + '-' + m + '-' + d;
    var date = dateofMonth;
    var events = [];
    var eventsCache = {}; //for caching

    var today = moment();
    var todayDate = today.format("YYYY-MM-DD");
    var tomorrow = today.add(1, 'days').format("YYYY-MM-DD");
    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next',
        center: 'title',
        right: 'month'
      },
      buttonText: {
        today: 'today',
        month: 'month'
      },
      eventMouseover: function(data, event, view) {},
      events: function(start, end, timezone, callback) {

        //have we already cached this time?
        if (events.eventsCache && events.eventsCache[start.toString + "-" + end.toString]) {

          //if we already have this data, pass it to callback()
          callback(eventsCache[start.toString + "-" + end.toString]);
          return;
        }

        var date = $('#calendar').fullCalendar('getDate');
        dateofMonth = date._d;
        var post_url = "path_to_file.php";
        $.ajax({
          url: post_url,
          type: "POST",
          dataType: 'json',
          cache: true,
          data: {
            dateofMonth: dateofMonth,
            csrf_test_name: csrf_token
          },
          beforeSend: function(xhr) {},
          success: function(result) {
            var events = [];
            if (!events.eventsCache)
              events.eventsCache = {};

            //store your data
            eventsCache[start.toString + "-" + end.toString] = result;

            $.each(result.attendance, function(index, res) {
              var date = (res.start).split('-');
              events.push({

                title: res.title,
                allDay: true,

              });
            });

            callback(events);
          }
        });
      },
      editable: false,
      droppable: true, // this allows things to be dropped onto the calendar !!!
      eventClick: function(calEvent, jsEvent, view) {}
    });

Answer 1

只要正确实现，在客户端进行缓存当然是可能的。但我发现您的代码中存在一些问题，导致其无法正常工作。

请记住，您已经在代码开头创建了 events 和 eventsCache。

var events = [];
var eventsCache = {};

这些不是问题，所以保留它们。

问题#1是这一行:

if (events.eventsCache && events.eventsCache[start.toString + "-" + end.toString]) {

这里您检查的是一个始终为空的对象，这意味着 if 内的代码永远不会执行。您需要将 events.eventsCache 修改为 eventsCache，因此该行变为:

if (eventsCache[start.toString + "-" + end.toString]) {

无需检查 eventsCache 是否存在，因为您已经创建了它。

问题 #2 是 success() 函数中的第一行:

var events = [];

每次执行 success() 时，此行都会清空 events 变量。换句话说，您正在清空缓存，因此请将其删除。

问题 #3 是同一函数中的接下来两行:

if (!events.eventsCache)
  events.eventsCache = {};

这会创建一个从未使用过的对象，因此也将其删除。回想一下，您已经在代码开头创建了 eventsCache 并且已经在使用它。无需创建另一个 eventsCache 对象。

应该可以了。