JavaScript setTimeout, how to delay the function execution

By default, all JavaScript code runs synchronously. This means that the statements are evaluated from top to bottom, one after another.

console.log('hello');
console.log('synchronous');
console.log('world');

The strings will be printed to the console in the same order as they appear.

hello
synchronous
world

Starting the timer with setTimeout

To delay the execution of some function in JavaScript, you can setTimeout. In the base case it accepts two parameters:

• callback - the function that should be called
• delay - in milliseconds

setTimeout sets the timer and calls callback function after delay milliseconds.

The callback function will be executed only once. If you’re looking for repeated execution, you should use setInterval.

console.log('hello');
setTimeout(() => {
  console.log('async message that appears on the screen in 1 second')
}, 1000);
console.log('world');

The messages will appear in the following order:

hello
world
async message that appears on the screen in 1 second

Common setTimeout mistakes

In JS, the first argument passed to setTimeout should always be a function. If you just write console.log - it won’t work properly.

console.log('hello');
setTimeout(console.log('failed async message'), 1000);
console.log('world');

This code snippet is broken. The output of failed async message won’t be delayed as the console.log will be evaluated synchronously and return undefined.

Then, there are 2 possibilities, which depend on the environment that your code runs in:

• Node.js - error

  TypeError [ERR_INVALID_CALLBACK]: Callback must be a function

• Browser - no error, but there will be no delay and the order of the messages will be not as expected

  hello
  failed async message
  world

Learn Full Stack JavaScript