Callback function not completed before setInterval's timeout

user_6072570 0
Viewed 489

What would be the result if the callback function is not completed before the timeout of the setInterval function.

For example:

setInterval(function() {
    //  This block takes more than 5 seconds.
}, 4000);

Now the setInterval has a timemout of 4 seconds whereas the callback functions takes 5 seconds to complete. What would happend, would it wait for the function to complete or make execute the callback again in 4 seconds?

javascript
5 Answers

It will wait for the callback to complete, as JavaScript is single-threaded. If you run the below snippet, you will see that 'done' is printed every 5 seconds.

setInterval(function() {
    let curr = new Date;
    while(new Date() - curr <= 5000);
    console.log('done');
}, 4000);

user_95131840

It depends.

If you put there some computations that happens to take 5 seconds (like looking for prime numbers or something), you'll lock the main thread and another call would be done only when it's unlocked, so in that case after about 5 seconds.

If the part that takes so long is for example a http request it will call the function every 4 seconds as it should. As far as I know there is no mechanism in setInterval that would check if function's promise is done or not.

user_109411020

Because of the event loop, the task queue and the single-threaded nature of JavaScript, it would always wait for the function to complete. Synchronous code is never canceled, unless the script is forcefully stopped.

The HTML standard says that timers must:

Wait until any invocations of [the timer initialization algorithm] that had the same method context, that started before this one, and whose timeout is equal to or less than this one's, have completed.

Other timers and browser/runtime tasks would also run between the function. But if the function is running on the main thread, the program would only receive events while the function is not running. In a browser, this would mean that the website would not be interactive for most on the time.

For those reasons, such functions with heavy synchronous computations should be run inside a Worker or split among several tasks (see How to queue a task in JavaScript?).

(I'm assuming "This block takes more than 5 seconds." means that the function returns after 5 seconds.)

user_92534140

So your setInterval has 2 parameters, a callback and the duration (4s) There are a few things than can affect your interval:

  • your setInteval call a browser API which will start a timer to exactly 4 seconds. Once the timer triggers that 4 seconds, it will append your callback on the JS callback queue. Again, this happens exactly after 4s.
  • Once all the synchronous code will be executed, JS will start running the callbacks in the callback queue, one at a time.

To answer your question: if it's just the code that you posted, it will most likely take exactly 4 seconds. In case you have some heavy operation in your code that takes more than 4 seconds, that code may take longer since it will run only after.

user_70881920

Check this out I found my own answer. What this does is, it spawns a thread to execute the callback function after every timeout that works seperately.

document.write('Part 1:<br>');
setInterval(function() {
    var x = Date.now();
    document.write(x + '<br>');
    setTimeout(function() {
        var y = Date.now();
        document.write(y.toString() + ' : ' + (y-x).toString() + '<br>');
    }, 5000);
}, 2000);

user_60725700
Related