Question

Using setInterval/ setTimeout, how can I make sure my function FINISH executing before waiting for some time and then executing again, FINISH, then wait, and so on. Thanks.

Answer 1

That’s the classic use case for a chained series of setTimeout:

setTimeout(foo, yourInterval);
function foo() {
    // ...do the work...

    // Schedule the next call
    setTimeout(foo, yourInterval);
}

Since setTimeout only schedules a single call to the function, you reschedule it (if appropriate) after the function has done its work.

Unlike setInterval, this works correctly even if the work your function does is asynchronous, as long as you reschedule it from the callback of the asynchronous work. For example:

setTimeout(foo, yourInterval);
function foo() {
    callSomethingAsynchronous(function() {
        // ...we're in the async callback, do the work...

        // ...and now schedule the next call
        setTimeout(foo, yourInterval);
    });
}

In contrast, if you’re doing something asynchronous, using setInterval rapidly becomes chaotic.