Implement sleep in JavaScript

This post will discuss how to implement the sleep function in JavaScript.

Sleep is a function that pauses the execution of a program for a specified amount of time. Sleep is useful for various purposes, such as simulating delays, waiting for asynchronous operations, or testing performance. However, JavaScript does not have a built-in sleep function, unlike some other programming languages. Therefore, we need to implement our own sleep function in JavaScript using different methods and techniques.

1. Using `setTimeout()` function

The simplest way to implement sleep in JavaScript is to use the setTimeout() function, which is a built-in function of the window object. The setTimeout() function executes a callback function after a specified delay in milliseconds. For example:

// Define a callback function

function sayHello() {

console.log("Hello");

}

// Execute the callback function after 2 seconds

setTimeout(sayHello, 2000);

Download Run Code

This code will print "Hello" to the console after 2 seconds. However, this is not exactly equivalent to sleep, because setTimeout() does not block the execution of the rest of the code. For example:

// Define a callback function

function sayHello() {

console.log("Hello");

}

// Execute the callback function after 2 seconds

setTimeout(sayHello, 2000);

// Print "World" to the console immediately

console.log("World");

Download Run Code

This code will print "World" to the console immediately, and then print "Hello" after 2 seconds. This is because JavaScript is a single-threaded and asynchronous language, which means that it can only execute one task at a time, but it can also schedule tasks for later execution without waiting for them to finish. Therefore, if we want to implement sleep using setTimeout(), we need to wrap the rest of our code in another callback function and pass it as an argument to setTimeout(). For example:

// Define a callback function

function sayHello() {

console.log("Hello");

}

// Define another callback function that contains the rest of the code

function sayWorld() {

console.log("World");

}

// Execute the first callback function after 2 seconds

setTimeout(sayHello, 2000);

// Execute the second callback function after 4 seconds

setTimeout(sayWorld, 4000);

Download Run Code

This code will print "Hello" to the console after 2 seconds, and then print "World" after another 2 seconds. However, this method has some drawbacks. First, it can make our code messy and hard to read, especially if we have many nested callbacks. Second, it can cause performance issues and memory leaks if we use too many or too long timeouts. Third, it can be affected by other factors that may delay or prevent the execution of our callbacks, such as browser throttling or user interaction.

With jQuery, we can use setTimeout() in function calls chains like::

jQuery.fn.delay = function(ms, f) {

this.each(function() {

setTimeout(f, ms);

});

return this;

};

$('#label1')

.addClass('hide')

.delay(5000)

.removeClass('show');

2. Using Promise and async/await Syntax

Another way to implement sleep in JavaScript is to use the Promise and async/await syntax, which are modern and standardized features of JavaScript. A Promise is an object that represents an asynchronous operation that can either be fulfilled with a value or rejected with a reason. The async/await syntax allows us to write asynchronous code in a synchronous-like manner using the keywords async and await. To implement sleep using Promise and async/await, we need to:

Create a Promise object that resolves after a specified delay using the setTimeout() function.
Define an async function that contains our code and uses the await keyword to pause until the Promise is resolved.
Call the async function and handle any errors or rejections using try/catch or then/catch.

For example, the following code will print "Hello" to the console, pause for 2 seconds, and then print "World" to the console.

// Create a `Promise` object that resolves after a specified delay

function sleep(ms) {

return new Promise(resolve => setTimeout(resolve, ms));

}

// Define an async function

async function sayHelloWorld() {

// Print "Hello" to the console

console.log("Hello");

// Pause for 2 seconds using await

await sleep(2000);

// Print "World" to the console

console.log("World");

}

// Call the async function and handle any errors or rejections

sayHelloWorld().catch(error => console.error(error));

Download Run Code

This method has some advantages over the setTimeout() method. First, it can make our code cleaner and easier to read, as we can write our code in a linear and sequential way. Second, it can make our code more robust and reliable, as we can handle errors and rejections using try/catch or then/catch. Third, it can make our code more modular and reusable, as we can define and call our async functions separately.

3. Using Generator and yield Syntax

Another modern way to implement sleep in JavaScript is to use the Generator and yield syntax. A Generator is a special kind of function that can be paused and resumed using the yield keyword. The yield keyword returns a value and pauses the execution of the function until it is resumed by calling the next() method of the Generator object. To implement sleep using Generator and yield, we need to:

Create a Generator function that contains our code and uses the yield keyword to pause for a specified delay.
Create a Generator object by calling the Generator function and store it in a variable.
Create a loop that calls the next() method of the Generator object until it is done.

For example, the following code will print "Hello" to the console, pause for 2 seconds, and then print "World" to the console.

// Create a Generator function

function* sayHelloWorld() {

// Print "Hello" to the console

console.log("Hello");

// Pause for 2 seconds using yield

yield setTimeout(() => iterator.next(), 2000);

// Print "World" to the console

console.log("World");

}

// Create a `Generator` object by calling the Generator function

let iterator = sayHelloWorld();

// Create a loop that calls the `next()` method of the `Generator` object

iterator.next();

Download Run Code

This method has some benefits over the other methods. First, it can make our code more expressive and intuitive, as we can use the yield keyword to indicate where we want to pause and resume our code. Second, it can make our code more flexible and adaptable, as we can pass values between the Generator function and the caller using yield and next(). Third, it can make our code more efficient and scalable, as we can control when and how our code is executed.

That’s all about implementing sleep in JavaScript.

Implement sleep in JavaScript

1. Using setTimeout() function

2. Using Promise and async/await Syntax

3. Using Generator and yield Syntax

Share this:

1. Using `setTimeout()` function