jQuery setTimeout, variable time parameter

Question

I make an ajax call to get a milliseconds value which will be different on successive calls.

I display the value returned in an element.

I then want to take that value and use it as the time parameter in setTimeout.

When my function executes again, I want to reset the setTimeout time parameter with the new value returned.

Here's what I have, but it only executes once after the initial ten seconds:

  var timeInterval = 10000;
 setTimeout(function() {
 $.ajax({
    type: "POST",
    url: "NowPlaying.asmx/GetMilliSeconds",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
      $('#duration').html(msg.d.MilliSeconds);
      clearTimeout(timeInterval);
      timeInterval = msg.d.MilliSeconds;
    }
  });
  }, timeInterval);

Is it possible to keep resetting timeInterval with different values based on successive calls to GetMilliSeconds?

Jacob Krall · Accepted Answer · 2013-08-29 21:29:20Z

1

setTimeout only fires once, because that's what it is designed to do. (Perhaps you have it confused with setInterval?)

clearTimeout(timeInterval) doesn't make any sense, for two reasons:

You have to pass it the return value from setTimeout, not an interval.
You don't need to clear a timeout once it has occurred, because each call to setTimeout only fires once.

This is probably closer to what you were aiming for:

 var timeInterval = 10000;
 var interval = setInterval(callBack, timeInterval);

 function callBack() {
   $.ajax({
    type: "POST",
    url: "NowPlaying.asmx/GetMilliSeconds",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
      $('#duration').html(msg.d.MilliSeconds);
      timeInterval = msg.d.MilliSeconds;

      // Update interval with the new value of timeInterval:
      clearInterval(interval);
      interval = setInterval(callBack, timeInterval);
    }
   });
  }

answered Aug 29, 2013 at 21:29

Jacob Krall

29k6 gold badges69 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jordan Over a year ago

ahh, beat me to it, and hit all the important points. Darn you! +1 :P

user847335 Over a year ago

Thanks. After clearInterval executes that first time, a second call to callBack is made. I was wondering, does the first call that was made to callBack ever exit? Is there some kind of stack somewhere that is just filling up? I'm just wondering what resources are consumed if each call to callBack is waiting to exit. I don't know that much about jQuery and javaScript. The recursive part of this has me all confused.

Jordan Over a year ago

@user847335 Because the ajax is asynchronous, it executes on a different thread then the normal code. This means the first call exits before the second call is ever made. Note, if your timeInterval is too short, callBack could get called again before it is cleared.

Jordan · Accepted Answer · 2013-08-29 21:30:19Z

0

You should have all of this in a function, the recursively call it in your success block. Like so:

function() NowPlaying (timeInterval) {
    //Your code...

    success: function(msg) {
        $('#duration').html(msg.d.MilliSeconds);
        clearTimeout(IntervalHandler);
        NowPlaying(msg.d.MilliSeconds);
    }
}

You will of course need a base case to know when to exit your recursive loop.

In addition, there is a problem with the way you use clearTimeout. You call it on your timeinterval, which is 10000 in your code, but this is not the handler for your setTimeout. Because you are using setTimeout, you shouldn't need to clear the handler, because the only way it will get to the clearTimeout is if it has already accessed the code within the setTimeout :)

answered Aug 29, 2013 at 21:30

Jordan

1,4338 silver badges14 bronze badges

2 Comments

user847335 Over a year ago

Thanks, I didn't see your comment until after I marked the answer. Yes, the base case makes sense to me with this recursion. Does the answer in Krall's post above exemplify this concern? Also, I didn't realize you need to get the return value from setInterval to clear it. Thanks a lot guys for your help.

Jordan Over a year ago

@user847335 Don't worry about it, Krall's post is better worded and hits all the major points, you should vote his up in addition to accepting it. I am not 100% sure he has a base case however, it might be a good idea to at the beginning of callback() to throw in this block: if(iWantOut) { clearInterval(interval); } else { //do everything else } where iWantOut is some condition that is true when you want the code to stop :)

Collectives™ on Stack Overflow

jQuery setTimeout, variable time parameter

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related