Jquery fullcalendar-无法缓存来自AJAX调用的JSON响应

我在回答这个问题

我想做的是类似的事情。 我有一个完整的日历（只启用了月份视图，所以我想懒散的抓取是行不通的）。 在月视图中，我显示用户的出勤信息。所以，当用户转到下一个月（比如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) {}
    });

---

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

请记住，您已经在代码开头创建了

事件

和

eventsCache

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

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

问题#1是这一行：

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

在这里，您检查的对象总是空的，这意味着如果从未执行，

中的代码。
您需要将
events.eventsCache
修改为
eventsCache
，因此该行变为：

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

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

问题#2是
success（）
函数的第一行：

var events = [];

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

每当执行
success（）
时，此行将清空
事件
变量。
换句话说，您正在清空缓存，因此请将其删除

问题#3是同一函数中的下两行：

var events = [];

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

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

应该这样做