setTimeout and setInterval in async JavaScript

@ JavaScript

Learn Asynchronous Time Manipulation

When talking about synchronous and asynchronous code, setTimeout and setInterval are often used to simulate asynchronous execution. This article will detail their underlying principles and actual usage.

setTimeout

If you want to execute a piece of code after a certain period, you would use setTimeout🔗, which is a method found in the DOM API🔗 and achieves the functionality of “execute function y after x milliseconds.”

setTimeout(callbackFunction, waitMilliseconds);
// Example 1: Using a named function
function callback() {
  // ...
}
setTimeout(callback, 1000);


// Example 2: Using an anonymous function
setTimeout(() => {
  // ...
}, 1000);

Let’s take a more practical case: Joe learns that dinner is ready but he is on the computer, so he tells his family he will leave the computer to eat dinner in one minute.

// Input
// Informing the family to wait one more minute
console.log('I will be over in one minute.');


// After one minute, Joe goes to eat dinner
setTimeout(() => {
  console.log('Joe has gone to eat dinner.');
}, 60 * 1000);


// Output
'I will be over in one minute.'(after one minute);
('Joe has gone to eat dinner.');

setInterval

setTimeout only executes once, while setInterval repeatedly executes the given function at the specified interval. They have exactly the same syntax:

setInterval(callbackFunction, waitMilliseconds);
// Input
let timePassed = 0;


setInterval(() => {
  timePassed += 1;
  console.log(timePassed);
}, 1000);


// Output
1
2
3
...

Canceling the Countdown

To clear a timer, you can use clearInterval(timerId) or clearTimeout(timerId). Each time you use the above methods, you will receive a “identifier ID” that you can pass to clearTimeout or clearInterval to terminate the entire scheduled call.

const timerId = setTimeout(...);
clearTimeout(timerId);
const timerId = setInterval(...);
clearInterval(timerId);

The Theory Behind

Everything seems so natural, but upon closer inspection, aren’t there some unreasonable things?

JavaScript runs in a single thread in the browser, meaning it can only execute one task at a time. So how can it manage to both “wait” and “execute subsequent code” at the same time?

In reality, JavaScript does execute setTimeout, but it delegates the “waiting” part to the Web API. For more details, you can refer to another article I’ve written at the bottom: Async JavaScript Visualized With Ease.

Zero Delay

When set the delay for setTimeout to 0 seconds, it doesn’t mean that the contents of the callback will execute immediately. Indeed, one must consider whether there are still tasks to complete in the Call Stack. This parameter only indicates “the least waiting time requested from the execution environment, not a guaranteed time.”

Therefore, for precise timing, you should avoid using setTimeout.

// Input
setTimeout(() => {
  console.log('bar');
}, 0);


console.log('foo');


// Output
('foo');
('bar');

References