Resolve a Promise after a Delay in JavaScript & Node.js

# Table of Contents

1. Resolve a Promise after a Delay in JavaScript
2. Resolve a Promise with a specific Value after a Delay
3. Using the setTimeout method to resolve a Promise after a Delay in Node.js
4. Resolving an existing Promise after a delay

# Resolve a Promise after a Delay in JavaScript

To resolve a Promise after a delay:

1. Define a function that takes the number of milliseconds as a parameter.
2. The function should resolve a Promise after the specified delay using setTimeout().

Copied!
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

delay(2000).then(() => {
  console.log('Promise resolved after 2 seconds');
});

This solution works in both Node.js and the browser.

The delay function takes the number of milliseconds to resolve the Promise after.

You can also specify a default parameter in the function's definition.

Copied!
// 👇️ set default delay to 2 seconds
function delay(ms = 2000) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

delay().then(() => {
  console.log('Promise resolved after 2 seconds');
});

The ms parameter has a default value of 2000, so the delay function can be called without supplying a default parameter to resolve the Promise after 2 seconds.

The previous examples use the .then() syntax, however, you can also use async/await.

Copied!
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

await delay(2000);

console.log('Promise resolved after 2 seconds');

Make sure your environment supports top-level await to be able to run the code sample.

# Resolve a Promise with a specific Value after a Delay

In many cases, you have to specify the value you want to resolve the Promise with.

Copied!
function delay(ms, value) {
  return new Promise(resolve =>
    setTimeout(() => resolve(value), ms),
  );
}

delay(2000, 'EXAMPLE VALUE').then(val => {
  console.log('Promise resolved after 2 seconds: ', val);
});

This solution also works in both Node.js and the browser.

The delay function now takes 2 parameters:

Notice that we passed an arrow function to the setTimeout() method.

Copied!
function delay(ms, value) {
  return new Promise(resolve =>
    setTimeout(() => resolve(value), ms),
  );
}

We have to pass a reference to a function and not the result of calling the resolve() function to setTimeout.

The setTimeout method will call the supplied function after the specified number of milliseconds.

The previous example uses the .then() syntax, however, you can also use async/await.

Copied!
function delay(ms, value) {
  return new Promise(resolve =>
    setTimeout(() => resolve(value), ms),
  );
}

const result = await delay(2000, 'EXAMPLE VALUE');

console.log(result); // 👉️ EXAMPLE VALUE

The result variable stores the resolved from the Promise value.

You can also specify default values for the two parameters if that suits your use case.

Copied!
function delay(ms = 2000, value = 'EXAMPLE VALUE') {
  return new Promise(resolve =>
    setTimeout(() => resolve(value), ms),
  );
}

const result = await delay();

console.log(result); // EXAMPLE VALUE

Calling the delay function without any arguments resolves a Promise after 2000 milliseconds with the string EXAMPLE VALUE.

# Using the setTimeout method to resolve a Promise after a Delay in Node.js

In a Node.js environment, you can also import the setTimeout method from timers/promises to get a promisified version of the method.

Copied!
import {setTimeout} from 'timers/promises';

const result = await setTimeout(2000, 'EXAMPLE VALUE');

console.log(result); // 👉️ EXAMPLE VALUE

The code sample above only works in Node.js and relies on the promisified implementation of setTimeout from timers/promises.

If your code also runs in a browser environment, use the code from the previous subheading.

The previous example uses the async/await syntax, however, you can also use Promise.then().

Copied!
import {setTimeout} from 'timers/promises';

setTimeout(2000, 'EXAMPLE VALUE').then(value => {
  console.log(value); // 👉️ EXAMPLE VALUE
});

The .then() method is called with the value of the resolved Promise after the specified delay.

# Resolving an existing Promise after a delay

In some cases, you might have an existing Promise that you want to resolve after a delay.

Copied!
function delay(ms, value) {
  return new Promise(resolve =>
    setTimeout(() => resolve(value), ms),
  );
}

const p = Promise.resolve('EXAMPLE VALUE');

p.then(value => delay(2000, value)).then(value => {
  console.log('The value is: ', value);
});

The p variable stores a Promise that resolves immediately.

In order to resolve the promise after a delay, we used the .then() syntax to return a call to the delay() function from the callback function we passed to .then().

The Promise in the example resolves with the string EXAMPLE VALUE after a delay of 2 seconds.

You can also use the async/await syntax in a similar way.

Copied!
function delay(ms, value) {
  return new Promise(resolve =>
    setTimeout(() => resolve(value), ms),
  );
}

const p = Promise.resolve('EXAMPLE VALUE');

const result = await p;

await delay(2000, result);

console.log(result); // 👉️ EXAMPLE VALUE

However, this makes your code a bit verbose and difficult to follow.

In this case, it would be simpler to use Promise.all to await the two Promises.

Copied!
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const p = Promise.resolve('EXAMPLE VALUE');

const [result] = await Promise.all([p, delay(2000)]);

console.log(result); // 👉️ EXAMPLE VALUE

The Promise in the example is resolved after 2 seconds even though the p Promise resolves immediately.

The Promise.all() method takes an array of Promises and returns a single Promise.

The returned Promise fulfills when all of the supplied Promises fulfill.

The method returns an array of the resolved Promises, so we used destructuring to assigned the first array element to a variable.

The delay function doesn't return a value we care about, so we simply ignored its return value and used it to add a delay of 2 seconds.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block
• How to Wait for a DOM element to Exist in JavaScript
• navigator.clipboard is undefined in JavaScript issue [Fixed]