Question

我跟随问题Fullcalendar JSON Feed Caching

我尝试做的事情是类似的。我有一个完整的日历（只启用了月视图，因此我觉得懒得取出工作）。在月视图中，我会显示用户的出勤信息。因此，当用户去另一个月（让他们说11月）时，会启动一个AJAX呼叫并返回该月的出勤率，如果用户再去另一个月（假设12月份）那个月的出勤率也是取出。

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

这是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 = [];

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

问题＃3 是同一功能中接下来的两行：

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

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

应该这样做。

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

1 个答案: