我正在缓存 ajax 调用返回的 JSON,然后显示缓存中的结果。我的问题是,如果该 Ajax 调用没有缓存,则结果仅在刷新时显示。这是因为 ajax 是异步的,但我该如何解决这个问题呢? Ajax async:false 已被弃用,因此这不是一个选项。 $.getJSON .done() 函数足够还是有更好的方法?
这是迄今为止我的代码:
if ((online === true)) {
//get JSON
$.getJSON(baseurl + '/wp-json/app/v2/files?filter[category]' + cat + '&per_page=100', function(jd) {
//cache JSON
var cache = {
date: new Date(),
data: JSON.stringify(jd)
};
localStorage.setItem('cat-' + cat, JSON.stringify(cache));
});
//if not online and no cached file
} else if ((online === false) && (!cache['cat-' + cat])) {
alert('There are no cached files. You need to be online.');
}
//get cached JSON
cache['cat-' + cat] = JSON.parse(localStorage.getItem('cat-' + cat));
var objCache = cache['cat-' + cat].data;
objCache = JSON.parse(objCache); //Parse string to json
//display JSON results from cache
$.each(objCache, function(i, jd) {
var thumb = jd.file_thumbnail.sizes.medium;
//.....etc...
)
}}
最佳答案
简单地重写代码会产生以下结果:
function cacheAsCacheCan(cat, callback) {
if (online === true) {
//get JSON
$.getJSON(baseurl + '/wp-json/app/v2/files?filter[category]' + cat + '&per_page=100', function(jd) {
//cache JSON
var cache = {
date: new Date(),
data: JSON.stringify(jd)
};
localStorage.setItem('cat--' + cat, JSON.stringify(cache));
});
//if not online and no cached file
} else if ((online === false) && (!cache['cat-' + cat])) {
callback('There are no cached files. You need to be online.');
return;
}
//get cached JSON
callback(null, cache['cat-' + cat] = JSON.parse(localStorage.getItem('cat-' + cat)));
}
cacheAsCacheCan('someCat', function(error, cachedata) {
if(error) {
alert(error);
} else {
var objCache = cachedata.data;
objCache = JSON.parse(objCache); //Parse string to json
//display JSON results from cache
$.each(objCache, function(i, jd) {
var thumb = jd.file_thumbnail.sizes.medium;
//.....etc...
)
}
}
);
关于javascript - JQuery $.getJSON 异步解决方法 - 缓存 ajax 结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38654904/