JQuery $ .getJSON異步解決方法 - 緩存ajax結果

Question

我緩存從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... 
    ) 
}} 

Answer 1

代碼的簡單改寫產生如下：

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... 
      ) 
     } 
    } 
);