在jQuery Ajax調用中使用setInterval的最佳方式是什麼？

我正在使用JQWidgets來創建餅圖。雖然這一切都很好，並且很有魅力。然而，我想要做的是每隔數秒鐘更新一次數據。使用jQuery，這裏是代碼，我到目前爲止有：在jQuery Ajax調用中使用setInterval的最佳方式是什麼？

function loadChart(id,name){ 
    //chart loads here 
    var speed = 5000, 
     t = setInterval(reloadData,speed); 
    function reloadData() { 
     source.url = 'data.php?id='+id; 
     var dataAdapter = new $.jqx.dataAdapter(source); 
     $('#pie').jqxChart({ source: dataAdapter }); 
     console.log('reloading pie...'+globalPieId); 
     speed = 5000; 
     clearInterval(t); 
     t = setInterval(reloadData, speed); 
    } 
}

我的問題是，如果loadChart函數被調用，將創建的setInterval的另一個實例，並經過三分四次，圖表是一個持續的刷新狀態。如何優化我的setInterval調用，以便只調用一個實例？

在此先感謝。

來源

2013-09-24 fiqbal

請嘗試使用'setTimeout'代替，並且只有當您從上次調用獲得回調時才添加新的超時。（你已經這樣做了） – lfxgroove

@lfxgroove擊中了頭部。溝''間隔'並用'超時'代替它，應該只是一些代碼更改，然後你可以擺脫'clearInterval'，因爲'超時'照顧它。 – tymeJV

一個很好的解釋：http://reallifejs.com/brainchunks/repeated-events-timeout-or-interval/ –

您需要您設置一個新的前清除現有的間隔。嘗試以下技巧。

function loadChart(id, name) { 
    // We use a trick to make our 'interval' var kinda static inside the function. 
    // Its value will not change between calls to loadChart(). 
    var interval = null; 

    // This is the core of a trick: replace outer function with inner helper 
    // that remembers 'interval' in its scope. 
    loadChart = realLoadChart; 
    return realLoadChart(id, name); 

    function realLoadChart(id, name) { 
     var speed = 5000; 

     // Remove old interval if it exists, then set up a new one 
     interval && clearInterval(interval); 
     interval = setInterval(reloadData, speed); 

     function reloadData() { 
      // ... your code, but no do nothing with interval here ... 
     } 
    } 
}

來源

2013-09-24 18:02:14

謝謝我會嘗試這個並回復你。 – fiqbal

這工作就像一個魅力！雖然我確實認爲@ lfxgroove的方法在任何其他情況下都能起作用。 – fiqbal

代替使用反覆調用函數的setInterval，您最好使用setTimeout函數，該函數將調用您只指定一次的回調函數。一旦這個回調被呼叫，你可以再次致電setTimeout，你將不再遇到你現在遇到的問題。你也要等到最後一次通話完成之後再開始做另一個也很好的通話。該代碼可能看起來像這樣與變化：

function loadChart(id,name){ 
    //chart loads here 
    var speed = 5000, 
     t = setTimeout(reloadData,speed); 
    function reloadData() { 
     source.url = 'data.php?id='+id; 
     var dataAdapter = new $.jqx.dataAdapter(source); 
     $('#pie').jqxChart({ source: dataAdapter }); 
     console.log('reloading pie...'+globalPieId); 
     speed = 5000; 
     t = setTimeout(reloadData, speed); 
    } 
}

對於工作POC你可以看到http://jsfiddle.net/9QFS2/

來源

2013-09-24 17:23:07 lfxgroove

感謝您的迴應。我剛剛嘗試過，得到和以前一樣的問題。一旦loadChart函數被再次調用不同的參數，圖表開始多次刷新（在我的情況下，它每5秒刷新兩次，兩次偏移2秒） – fiqbal

如何調用'loadChart'？ – lfxgroove

這個。至少可以說''setInterval'是有問題的。 – Robusto

在jQuery Ajax調用中使用setInterval的最佳方式是什麼？

回答

相關問題