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

我正在关注这个问题 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) {}
    });

最佳答案

只要您正确实现，在客户端缓存当然是可能的。
但是我在您的代码中看到了几个阻止它工作的问题。

请记住，您已经在代码的开头创建了 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 = [];

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

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

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

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

那应该这样做。

关于jquery - fullcalendar-无法缓存来自 AJAX 调用的 JSON 响应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41628429/