javascript - What is the optimal way to use setInterval in jquery ajax calls? - Stack Overflow

admin管理员组

文章数量:1313733

I am using JQWidgets to create a pie chart. And while that is all fine and dandy and working like a charm. What I'd like to do however is update the data every x number of seconds. Using jQuery, here is the code that I have so far:

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

My issue is, that if the loadChart function is called, another instance of setInterval is created, and after three or four times, the chart is in a constant state of refresh. How do optimize my setInterval call so that only one instance is called?

Thanks in advance.

I am using JQWidgets to create a pie chart. And while that is all fine and dandy and working like a charm. What I'd like to do however is update the data every x number of seconds. Using jQuery, here is the code that I have so far:

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

My issue is, that if the loadChart function is called, another instance of setInterval is created, and after three or four times, the chart is in a constant state of refresh. How do optimize my setInterval call so that only one instance is called?

Thanks in advance.

• javascript
• jquery
• ajax
• setinterval

Share Improve this question Follow asked Sep 24, 2013 at 17:13 fiqbalfiqbal 6111 gold badge44 silver badges1010 bronze badges 3

• 2 Try using setTimeout instead and add a new timeout only when you've got the callback from the last call. (which you're already doing it would seem) – lfxgroove Commented Sep 24, 2013 at 17:15
• 1 @lfxgroove hit the nail on the head. Ditch that interval and replace it with a timeout, should only be a few code changes and then you can get rid of that clearInterval since timeout takes care of it. – tymeJV Commented Sep 24, 2013 at 17:16
• A fine explanation: reallifejs./brainchunks/repeated-events-timeout-or-interval – Charlie Vieillard Commented Mar 15, 2017 at 14:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Instead of using setInterval which calls the function over and over again you would be better off using the setTimeout function which will call the callback you specify just once. Once that callback is called you can once again call setTimeout and you'll stop having the problems you're having right now. Also you'll wait until the last call is done before you start doing another one which is also good. The code might look something like this with the change:

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

For a working poc you could see http://jsfiddle/9QFS2/

You need to clear existing interval before you set up a new one. Try the following trick.

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

本文标签： javascriptWhat is the optimal way to use setInterval in jquery ajax callsStack Overflow