jQuery setInterval Issue

Question

I'm running a function that checks a remote script every second and updates a progress bar. I'm new with setInterval and am having an issue with getting it to stop looping after it's done.

I've added var interval post function, and clearInterval(interval); in several different places - basically like covering my eyes and pinning the tail on the donkey - and have had no success. Where would I set clearInterval to stop the loop once data has reached 100?

function getProgress(hash) {
  setInterval(function() {
    $.ajax({
        type: 'GET',
        url: 'http://domain.com/script.php?hash=' + hash,
        cache: false,
        dataType: 'json',
        success: function(data) {
          if (data < 100) {
            getProgress();
          } else {
            $('#progress-bar').hide();
          }
        },
    });
  }, 1000);
}

Please see the accepted answer: http://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript — user212514, Jun 10 '16 at 01:06
Since you're using `setInterval` your function will be called, no need to call it manually with `getProgress()` — user3, Jun 10 '16 at 01:13
Why do you pass `hash` as a parameter at initial call to `getProgress`, but not within `success` callback? `hash` would be `undefined` at second through n calls to `getProgress`? What is expected result if response takes longer than one second to complete? — guest271314, Jun 10 '16 at 01:15

choz · Accepted Answer · 2016-06-10T01:29:54.593

This is the answer assuming that you are unable to stop the previous intervals. You're calling getProgress method everytime the data < 100. Which calls to another setInterval method, and re-create a new id for that interval.

Let's say that getProgress method called in a loop for more than one time, if you do,

var intervalId;
function getProgress(hash) {
  intervalId = setInterval(function() {..}, 1000);
}

And the next time you want to stop the interval, you'd call clearInterval(intervalId). And this is very wrong. You have more than one interval, and you just happened to stop the last one while the previous ones are still running until data < 100 is false.

I'd suggest to store your interval ids in an array, like..

var intervalIds = [];
function getProgress(hash) {
  intervalId = setInterval(function() {..}, 1000);
  intervalIds.push(intervalId);
}

And if the next time you want to stop interval, you can do it like..

for (var idx in intervalIds) {
   clearInterval(intervalIds[idx]);
}

But, that's just one way to stop all the intervals. What I am trying to say here is your code is ugly. If the reason you're using setInterval method is to wait for 1000 ms to retrieve another data, setTimeout would do the job just fine. And here's a sample to use it and passing the parameter back.

function getProgress(hash){
   $.ajax({
        type: 'GET',
        url: 'http://domain.com/script.php?hash=' + hash,
        cache: false,
        dataType: 'json',
        success: function(data) {
          if (data < 100) {
            setTimeout(function() {
              getProgress(hash);
            }, 1000);
          } else {
            $('#progress-bar').hide();
          }
        },
    });
}

Perfect! Thank you very much for the explanation. I tried `setTimeout` with my previous code and couldn't get it to work so I changed it to `setInterval`. Whoops! :) — timgavin, Jun 10 '16 at 01:35

score 0 · Answer 2 · answered Jun 10 '16 at 01:13

I'm assuming that your code is done when the progress bar is hidden. You need to set you Interval to some variable which you can use to clear it.

function getProgress(hash) {
  var someVariable = setInterval(function() {
    $.ajax({
        type: 'GET',
        url: 'http://domain.com/script.php?hash=' + hash,
        cache: false,
        dataType: 'json',
        success: function(data) {
          if (data < 100) {
            getProgress();
          } else {
            $('#progress-bar').hide();
            clearInterval(someVariable);
          }
        },
    });
  }, 1000);
}

score 0 · Answer 3 · edited Aug 03 '18 at 20:22

Good example : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_clearinterval

var myVar = setInterval(function() {
  myTimer()
}, 1000);

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
  clearInterval(myVar);
}

when you call setInterval you need to set the return value to variable. then you can call clearInterval with this parameter and it will stop.

jQuery setInterval Issue

3 Answers3