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

Question

我正在使用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

与其使用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/

Answer 2

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

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