setTimeOut() or setInterval() . 4 methods to apply same thing. which is best?

Question

I am displaying a countdown watch with respect to a given endtime.

although its working perfect but i want to know which is best methods to apply.

below is my countdown function.

  var timerId;
  var postData = {endDate : endDate, tz : tz};  
  var countdown = function()
    { 
      $.ajax({
               type : 'post',
               async : false,
               timeout : 1000,
               url : './ajax_countdown.php',
               data : $.param(postData),
               dataType : 'json',
               success : function (resp){
                  $('#currentTime').html(resp.remainingTime);
               }
            }); 
     }

what i want is that function (countdown) shoud be called automatically after every 1 second and if it does not execute/completed within 1 second then cancel the current ajax and start a new ajax call.

now I found there are 4 working methods

method 1: using setInterval() with window object

window.setInterval(countdown, 1000);

method 2 : using setInterval() independently

setInterval(function() {countdown()}, 1000);

method 3 : using setTimeOut inside the function an call other function to intialize main function

var countdown = function() { 
     $.ajax({ //ajax code });
     timerId = setTimeout(countdown, 5000); // assign to a variable
 }

function clockStart() {  
        if (timerId) return
        countdown();
}
clockStart(); // calling this function 

method 4 : using anonymous function call

var countdown = function() { 
     $.ajax({ //ajax code });
     timerId = setTimeout(countdown, 5000);
 }
  (function(){
         if (timerId) return;
         countdown();
})();

Please tell me

• What is con and pro of each method and which one is best/right method?
• Should i use clearTimeOut() or clearInterval() ?

References

http://javascript.info/tutorial/settimeout-setinterval

Calling a function every 60 seconds

http://www.electrictoolbox.com/using-settimeout-javascript/

Answer 1

I wouldn't use any of your methods. The reason is setTimeout and setInterval do not guarantee that your code will execute after the specified delay. This is because JavaScript is single threaded.

If I need to call a function only once after a specified delay then I use setTimeout. However if I need to call a function after a fixed interval of time then I do not use setInterval. Instead I make use of delta timing. Here's the code.

The advantage of using delta timing is that your code will execute closer to the fixed interval of time you specify. It corrects itself. Creating and using a delta timer is simple. For example your code would be written as follows:

var timer = new DeltaTimer(function (time) {
    $.ajax({
        // properties
    });

    if (time - start >= 5000) timer.stop();
}, 1000);

var start = timer.start();

The above delta timer is better than setInterval (method 1), makes use of setTimeout (method 2) but also corrects itself, starts the timer using a function (method 3), and doesn't pollute the scope with a special clockStart function (method 4).

In addition you can easily get the exact time the function is called after the timer starts as the time the function is called is passed as an argument to the function. The timer also has a stop method to stop the timer. To start it again call start again.

Edit:

If you want to make the DeltaTimer look more like setInterval (start the timer automatically) you may implement a spawn function as follows:

DeltaTimer.spawn = function (render, interval) {
    var timer = new DeltaTimer(render, interval);

    var start = timer.start = function (start) {
        return function () {
            render.start = start();
        };
    }(timer.start);

    start();

    return timer;
};

Then you may automatically create and start the DeltaTimer as follows:

var timer = DeltaTimer.spawn(function countdown(time) {
    $.ajax({
        // properties
    });

    if (time - countdown.start >= 5000) timer.stop();
}, 1000);

Thus var timer = DeltaTimer.spawn(funct, delay); is equivalent to var interval = setInterval(funct, delay); and timer.stop(); is equivalent to clearInterval(interval);. I guess that's as much as you can automate it.

Answer 2

The benefit of using #1 over #2 is that the window reference removes the chance of a scope variable overwriting setInterval.

// When out of global scope...
function setInterval() {

}

window.setInterval(foo, 100); // still calls the "correct" setInterval

There's no difference between wrapping the call to countdown in a function (#1, #2). #2 gives you greater flexibility as you can also call other functions/ pass arguments etc (although it's obviously trivial to swap from #1 to #2 if this becomes the case).

#4 saves you having to declare a function clockStart, other than that, it's the same as #3.

Use clearTimeout if you used setTimeout, and clearInterval if you used setInterval...

You should also be aware of how setTimeout and setInterval work differently. There's an amazing answer here which explains that...

As for what I'd use? I'd use #2.