Where’s the Sleep Function in JavaScript?
Tags: codenewbie, javascript, webdev, beginners
Published: 2020-04-12 00:52:43

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

If we try to search for the `sleep` function in JavaScript, we won’t find it. However, we can easily make one with existing functions.

setTimeout Function
===================

There’s a `setTimeout` function that lets us run code after a specified number of milliseconds. We can use it to create our own `sleep` function.

Like most time-sensitive JavaScript code, it’s going to be asynchronous since this won’t hold up the main thread running our program.

We can create a function that runs code after a specified amount of time by writing:

```js
const runLater = (delay) => {  
  setTimeout(() => {  
    console.log('bar');  
  }, delay)  
}
```

The `runLater` function will show the string `'bar'` when we pass in the delay by in number of milliseconds.

If we run:

```js
console.log('foo')  
runLater(100);  
console.log('baz')
```

We’ll see that we get:

```
foo  
baz  
bar
```

This is because the synchronous code, which are the first and last lines, are run first. The `runLater(100)` is queued up to be run in the next iteration of the event loop between the time when the first and last lines are run.

Then in the next iteration of the event loop, the code in the `setTimeout` callback runs, which will log `'baz'` .

This means that if we want to run code in callbacks sequentially, we have to nest the callbacks. And too many callbacks create callback hell.

Promises
========

Therefore, the best way to run asynchronous JavaScript code sequentially is to use promises. We can create a promise with the `setTimeout` function by using the `Promise` constructor.

We can write the `sleep` function as follows:

```js
const sleep = (delay) => {  
  return new Promise(resolve => {  
    setTimeout(resolve, delay)  
  });  
}
```

The `sleep` function returns a promise which resolves after the `setTimeout` callback, which is the `resolve` function is called after `delay` milliseconds.

A promise is asynchronous like the `setTimeout` callback. The good thing about it is that we can run them sequentially as they’re fulfilled.

Fulfilled means that the `resolve` method in the callback above is called. A promise can also be rejected with the `reject` function when an error occurs.

Using promises let us chain asynchronous code and run them sequentially.

We can do this cleanly with `async` functions. To define an `async` function, we use the `async` and `await` keywords as follows:

```js
(async ()=>{  
  console.log('foo');  
  await sleep(2000);  
  console.log('bar');  
})();
```

If we run the code above, we should see that `'foo'` is logged, then 2 seconds after that `'bar'` is logged.

This will let us up time delayed code without hanging our app.

The number 2000 in the argument is in milliseconds, so it’ll wait 2 seconds before running the next line.

`await` tells the browser to hold off on executing the next line until the `await` line is resolved. We can put `await` in front of any promise to indicate that we should wait for the promise to resolve before continuing.

We can keep repeating this:

```js
(async () => {  
  console.log('foo');  
  await sleep(2000);  
  console.log('bar');  
  await sleep(2000);  
  console.log('a');  
  await sleep(2000);  
  console.log('b');  
})();
```

But it gets repetitive. Fortunately, we can use loops to eliminate this repetition.


For-Await-Of Loop
=================

We have the `for-await-of` loop which loops through iterable objects like arrays and array-like objects whether they’re synchronous or asynchronous.

To do this, we can write:

```js
(async () => {  
  const arr = ['foo', 'bar', 'a', 'b'];  
  for await (let a of arr) {  
    console.log(a);  
    await sleep(2000);  
  }  
})();
```

The code above is much cleaner and it doesn’t matter how many things we want to loop through.

It’s important that we actually have promise code inside our `async` functions whether we want to use loops or not.

We can also return a promise from an `async` function, so we can write:

```js
(async () => {  
  const arr = ['foo', 'bar', 'a', 'b'];  
  for await (let a of arr) {  
    console.log(a);  
    await sleep(2000);  
  }  
  return sleep(2000);  
})();
```

to return the `sleep(2000)` promise.

Also, we can give it a name and use it in other `async` functions as follows:

```js
const foo = async () => {  
  const arr = ['foo', 'bar', 'a', 'b'];  
  for await (let a of arr) {  
    console.log(a);  
    await sleep(2000);  
  }  
  return sleep(2000);  
};

(async () => {  
  await foo();  
  console.log('c');  
})();
```

This shows that `async` functions are promises.

Conclusion
==========

In JavaScript, there’s no `sleep` function like in other languages. However, we can make our own easily.

With promises, we can solve timing issues easily. It makes time-delayed code execution clean and readable. We can write a time-delayed JavaScript code by using the `setTimeout` function.

The `async` and `await` syntax makes reading and writing the code a breeze.

Finally, we can call `async` functions in other `async` functions since these types of functions return promises only.