Timeouts

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Timeouts

JavaScript has a function setTimeout, that lets you execute code after a period of time. It looks like this:

setTimeout(callback, delay)

callback is the function to execute when the timer expires.

delay is the amount of time JavaScript should wait before executing the callback. This delay is written in milliseconds. One second is equal to one thousand milliseconds.

If you want to log I'm late! into the console three seconds from now, you can write this:

setTimeout(() => {
  console.log(`I'm late!`)
}, 3000)

Promisified timeouts

You can use promises to create timeouts. A promisified timeout is great for learning purposes. We’ll use a promisified timeout in the next lesson. Let’s learn how to make one and use one now.

First, we’ll create a function. Let’s call this function delay. delay should return a promise.

const delay = _ => {
  return new Promise((resolve, reject) => {
    // resolve or reject accordingly
  })
}

This promise should resolve after the allocated amount of time has passed. We’re going to call this allocated amount of time duration.

const delay = duration => {
  return new Promise(resolve => setTimeout(() => resolve, duration))
}

We can use delay like a normal promise.

// This code logs "Three seconds have passed" after three seconds
delay(3000)
  .then(_ => console.log('Three seconds have passed!'))

Passing values through the promisified timeout

We can resolve a value to pass it into the next then call. This means we can pass a value into delay. Then, we resolve this value to pass it through delay.

const delay = (duration, value) => {
  return new Promise(resolve => setTimeout(() => resolve(value), duration))
}

We can pass a value into next then call now.

// This code logs "yay" after three seconds
delay(3000, 'yay')
  .then(value => console.log(value))

We can also use delay in the middle of a promise. Let’s say we fetch a list of my repositories. We want to wait for three seconds before acting on the repositories.

// This code should log repos after three seconds
fetch('https://api.github.com/users/zellwk/repos')
  .then(r => r.json())
  .then(repos => delay(3000, repos))
  .then(repos => console.log(repos))

Using the promisified timeout in an asynchronous function

delay is a promise. We can use await to wait for delay to resolve in an asynchronous function.

If we use delay in an asynchronous function, we don’t need to pass a value through it. This is because the variables we need are already in scope.

const fetchRepos = async link => {
  const response = fetch(link)
  const repos = response.json()

  // Waits for three seconds
  await delay(3000)

  // Logs 30 repositories
  console.log(repos)
}

fetchRepos('https://api.github.com/users/zellwk/repos')

Exercise

Use delay to start a promise. Wait for 1 second.
Use delay in the middle of a promise. Wait for 1 second.
Use delay in an asynchronous function. Wait for 1 second.