How to Create Delay in JavaScript: Simple Guide

You can create a delay in JavaScript using setTimeout to run code after a pause, or use async/await with a promise to pause execution inside an async function. The setTimeout method schedules a function to run after a specified time in milliseconds.

Syntax

The basic syntax to create a delay uses setTimeout:

• setTimeout(function, delayInMilliseconds): Runs the function after the delay.

For modern async code, you can create a delay function using promises:

• const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
• Then use await delay(ms) inside an async function to pause execution.

javascript

setTimeout(() => {
  console.log('This runs after 2 seconds');
}, 2000);

// Async/await delay function
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

async function example() {
  console.log('Wait starts');
  await delay(2000);
  console.log('Wait ends after 2 seconds');
}
example();

Output

Wait starts
Wait ends after 2 seconds
This runs after 2 seconds

Example

This example shows how to use setTimeout for a simple delay and how to create a reusable delay function with async/await for cleaner code that waits before continuing.

javascript

function delayWithTimeout() {
  console.log('Start delayWithTimeout');
  setTimeout(() => {
    console.log('2 seconds passed (setTimeout)');
  }, 2000);
}

delayWithTimeout();

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

async function delayWithAsync() {
  console.log('Start delayWithAsync');
  await delay(2000);
  console.log('2 seconds passed (async/await)');
}

delayWithAsync();

Output

Start delayWithTimeout
Start delayWithAsync
2 seconds passed (setTimeout)
2 seconds passed (async/await)

Common Pitfalls

A common mistake is expecting setTimeout to pause code execution, but it only schedules code to run later without stopping the current flow. Using await with a promise-based delay inside an async function is the correct way to pause execution.

Wrong way (does not pause):

console.log('Before');
setTimeout(() => console.log('Inside timeout'), 2000);
console.log('After');

Right way (pauses inside async function):

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

async function run() {
  console.log('Before');
  await delay(2000);
  console.log('After 2 seconds');
}
run();

Quick Reference

Use this quick guide to create delays in JavaScript:

Method	Description	Usage Example
setTimeout	Runs code after a delay without pausing execution	setTimeout(() => console.log('Hi'), 1000)
Promise + async/await	Pauses execution inside async functions	await new Promise(r => setTimeout(r, 1000))
Custom delay function	Reusable delay with async/await	const delay = ms => new Promise(r => setTimeout(r, ms))

Key Takeaways

Use setTimeout to schedule code after a delay without stopping current code.

Use async/await with a promise-based delay to pause execution inside async functions.

setTimeout alone does not pause code; it only delays running a function.

Create reusable delay functions with promises for cleaner asynchronous code.

Always use async functions when awaiting delays to avoid blocking the main thread.