1

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

提前致谢。

4

2 回答 2

7

与其setInterval一遍又一遍地使用 which 调用函数，不如使用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-24T17:23:07.507 回答
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 ...
        }
    }
}
于 2013-09-24T18:02:14.340 回答