How to start setInterval loop immediately?

JavascriptJquerySetinterval

Javascript Problem Overview


In a simple setInterval

setInterval(function() {
      // Do something every 9 seconds
}, 9000);

The first action will happen after 9 seconds (t=9s). How to force the loop to perform the first action immediately (t=0)?

I think it is due to the mechanism of setInterval to have Delay - Action - Delay - Action ... loop; instead of Action - Delay - Action - Delay ... loop.

EDIT: My function is indeed a loop as

setInterval(function(){
$('.test').each(function(idx){
    var duration = 1000;
    $(this).delay(duration*idx);
    Some stuff here
});
}, 4000);

Javascript Solutions


Solution 1 - Javascript

Keep it simple. You can use a named function instead of an anonymous function; call it and set an interval for it.

function doSomething() {
    console.log("tick");
}
doSomething();
setInterval(doSomething, 9000);

Create a scope if necessary:

(function() {
    function doSomething() {
        console.log("tick");
    }
    doSomething();
    setInterval(doSomething, 9000);
})();

Finally, the following works without creating or affecting x:

setInterval(function x() {
    console.log("tick");
    return x;
}(), 9000);

Solution 2 - Javascript

Sometimes I use this pattern...

(function me() {
    // Do something every 9 seconds

    setTimeout(me, 9000);
})();

It's not quite the same, as it will wait until the do something is executed before waiting ~9 seconds to call it again. But, this is often useful so events on the event queue do not stack up needlessly (however unlikely it is some code will take 9 seconds to run :)

Note that in older IEs, the me will leak to the outside scope.

Solution 3 - Javascript

setInterval() is a really ugly function. I use this sanitized version, which does call the function immediately, and takes a time in seconds, BEFORE the function parameter so calling it with an inline function definition actually looks sensible.

function startInterval(seconds, callback) {
  callback();
  return setInterval(callback, seconds * 1000);
}

Solution 4 - Javascript

Use a named function and call it and assign it to the interval.

var myFnc = function() {
    // Do something every 9 seconds
};
setInterval(myFnc, 9000);
myFnc();

The other option is to use setTimeout instead.

var myFnc = function() {
    // Do something every 9 seconds
    setTimeout(myFnc, 9000);
};
myFnc();

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGooglebotView Question on Stackoverflow
Solution 1 - JavascriptSalman AView Answer on Stackoverflow
Solution 2 - JavascriptalexView Answer on Stackoverflow
Solution 3 - JavascriptRichardView Answer on Stackoverflow
Solution 4 - JavascriptepascarelloView Answer on Stackoverflow