Sometimes you want your function to pause execution for a fixed amount of seconds or milliseconds.

In a programming language like C or PHP, you’d call sleep(2) to make the program halt for 2 seconds. Java has Thread.sleep(2000), Python has time.sleep(2), Go has time.Sleep(2 * time.Second).

JavaScript does not have a native sleep function, but thanks to the introduction of promises (and async/await in ES2018) we can implement such feature in a very nice and readable way, to make your functions sleep:

const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
}

You can now use this with the then callback:

sleep(500).then(() => {
  //do stuff
})

Or use it in an async function:

const doSomething = async () => {
  await sleep(2000)
  //do stuff
}

doSomething()

Remember that due to how JavaScript works (read more about the event loop), this does not pause the entire program execution like it might happen in other languages, but instead only your function sleeps.

You can apply the same concept to a loop:

const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
}

const list = [1, 2, 3, 4]
const doSomething = async () => {
  for (const item of list) {
    await sleep(2000)
    console.log('馃')    
  }
}

doSomething()

Download my free JavaScript Beginner's Handbook!


Check out my in-depth, practical Web Development Courses!

(all 50% off with the coupon code POSITIVEVIBRATIONS)

猡达笍猡达笍猡达笍

And signup to my upcoming JavaScript Bootcamp!

猡达笍猡达笍猡达笍