Slow processing using setTimeout, async and await in JavaScript

Cover Image for Slow processing using setTimeout, async and await in JavaScript
Ali Bentaleb

In this tutorial, we are going to expose how to use setTimeout to slow down or delay processing using 3 different ways in JavaScript.

By following this tutorial you will be able to create your own timer like this link and set how much seconds to wait before continuing each time you click on the link

With setTimeout function in JS and combining it with async/await keywords, we can let our program take some breath before continuing to the next instruction.

Let’s discover the three ways in which we can delay processing in JavaScript

1 - With promise

Since setTimeout return a Timeout object and not a promise, it is not possible to use it alone in order to slow down processing.

Instead, we can wrap it in a promise, then we can call await to wait for our promise to resolve, and so slow down our program. Take a look at this example:

You can copy it in test.js and run it using node test.js

const delay = (seconds) =>
	new Promise((resolve) => setTimeout(resolve, seconds * 1000));

const wait = 3;

const func = async () => {
	console.log('Hello');
	await delay(wait);
	console.log('Hi after', wait, 'seconds');
};

func();

A note here. setTimeout belong to timer module in Node.js, and the functions defined in this module are global, so no need to use require keyword when using setTimeout.

So that’s why you can use it in the code above without importing anything

The output is generated upon code order.

Output

Hello
Hi after 3 seconds

If we use

await setTimeout(() => console.log('timeout elapsed'), 1000 * wait);

directly, the output for the two other console.log will come up first, then the sentence timeout elapsed will come last, which is not convenient for our purpose.

2 - With util.promisify

It is also possible to do the same using util.promisify function available in Node.js since version v8.0.0.

The util.promisifiy role is so to take function following the common error-first callback style, and make them return a promise for use.

Let’s take a look on how we can simplify code using it.

const util = require('util');
const timePromise = util.promisify(setTimeout);

const func = async () => {
	const wait = 3;
	await timePromise(wait * 1000);
	console.log('Hi after', wait, 'seconds');
};

func();
**Output**

The same results are achieved through.

Hi after 3 seconds

3 - With timers/promises

Now, since Node.js version V15.0.0, it is possible to use setTimeout function as a promise without too much concerning about callbacks hell.

To use it, first make sure you have a node.js version higher than V15.0.0, to do so, type in a terminal:

node -v

//v16.13.1

You should see a version higher than 15, in my case i am using v16.

Next, let’s see how it is can be done

const tt = require('timers/promises');

const func = async () => {
	const wait = 3;
	await tt.setTimeout(1000 * wait);
	console.log('Hi after', wait, 'seconds');
};

func();

Conclusion

So in these simple lines, we could achieve the slow in processing with SetTimeout with more clear code.

module.exports and ES modules ...