在jquery ajax调用中使用setInterval的最佳方法是什么？

我正在使用JQWidgets来创建饼图。 虽然这一切都很好，花花公子，像一个魅力。 然而，我想要做的是每x秒更新一次数据。 使用jQuery，这是我到目前为止的代码：

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调用，以便只调用一个实例？

提前致谢。

Answer 1

您需要在设置新间隔之前清除现有间隔。 尝试以下技巧。

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

Answer 2

而不是使用一遍又一遍地调用函数的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); } } 

对于工作伙伴，你可以看到http://jsfiddle.net/9QFS2/