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);
    }
}

对于工作伙伴，您可以看到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 ...
        }
    }
}

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

2 个答案: