回調不回撥

Question

我試圖實現從API調用中檢索到的JSON數據的Javascript緩存（改編from here），以顯示儀表板小部件。我們的想法是這樣的：

1. 裝入谷歌圖的腳本一旦加載
2. ，每個儀表盤窗口小部件調用相應的API來獲取JSON數據
3. 緩存從每個API調用的JSON數據，如果兩（或更多）的部件使用相同的URL，並獲取相同的數據
4. 使用高速緩存JSON數據

這是據我已經得到了渲染每個插件的谷歌圖表，但我RenderWidgetN()功能execu婷。使用Firebug時，我可以看到撥打/api/...的URL，並返回數據，但我無法再訪問它。

<script src="https://www.gstatic.com/charts/loader.js"></script> 
<script> 
var cache = {}; 
function LoadOrCacheApiData(url, callback) { 
    if (!cache[url]) { 
     cache[url] = $.get(url).promise(); 
    } 
    cache[url].done(callback); 
} 

function DisplayData() { 
    LoadOrCacheApiData('/api/AverageLevel?TopN=5', 'RenderWidget0'); 
    LoadOrCacheApiData('/api/ExpiryCountNDays?DaysAhead=7', 'RenderWidget1'); 
    LoadOrCacheApiData('/api/LoginCount?DaysPrevious=7', 'RenderWidget2'); 
} 

google.charts.load('current', { packages: ['corechart', 'table'] }); 
google.charts.setOnLoadCallback(DisplayData); 


function RenderWidget0() { 
    var d = JSON.parse(cache['/api/AverageLevel?TopN=5']); 
    alert(d); 
    // to do: render content to div 
} 

function RenderWidget1() { 
    var d = JSON.parse(cache['/api/ExpiryCountNDays?DaysAhead=7']); 
    alert(d); 
    // to do: render content to div 
} 

function RenderWidget2() { 
    var d = JSON.parse(cache['/api/LoginCount?DaysPrevious=7']); 
    alert(d); 
    // to do: render content to div 
} 
</script> 

我沒有用回調也不緩存之前，所以大概有萬噸的更好的方法來實現這一目標。任何建議/幫助，將不勝感激請。我很欣賞這個代碼可以被壓縮，但只是想在開始之前讓它工作。

Answer 1

我想你的回調都應該是函數本身，而不是功能的字符串名稱：

function DisplayData() { 
    LoadOrCacheApiData('/api/AverageLevel?TopN=5', RenderWidget0); 
    LoadOrCacheApiData('/api/ExpiryCountNDays?DaysAhead=7', RenderWidget1); 
    LoadOrCacheApiData('/api/LoginCount?DaysPrevious=7', RenderWidget2); 
} 

我建議你使用的從回調的data參數取返回的數據的模式，而比使用緩存對象（請參閱$.ajax的文檔）。另外，如果您在$.get的調用中提供了的dataType，那麼JQuery將爲您解析結果。例如：

function LoadOrCacheApiData(url, callback) { 
    if (!cache[url]) { 
     cache[url] = $.get(url, 'json').promise(); 
    } 
    cache[url].done(callback); 
} 

// ... 

function RenderWidget0(data, textStatus, jqXHR) { 
    // no need for `var d = JSON.parse(data);` 
    // since JQuery will parse for you 

    alert(data); 

    // to do: render content to div 
} 

我也確定你確實需要在你自己的代碼中進行緩存。如果這是客戶端代碼，所有現代瀏覽器和大多數其他用戶代理都擁有自己的本地緩存，爲您提供幫助。