我正在关注这个问题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 = [];
每次执行 success()
时,此行都会清空 events
变量。
换句话说,您正在清空缓存,因此请将其删除。
问题 #3 是同一函数中的接下来两行:
if (!events.eventsCache)
events.eventsCache = {};
这会创建一个从未使用过的对象,因此也将其删除。
回想一下,您已经在代码开头创建了 eventsCache
并且已经在使用它。
无需创建另一个 eventsCache
对象。
应该可以了。
关于jquery - fullcalendar-无法缓存 AJAX 调用的 JSON 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41628429/