How do you stop JavaScript execution for a while: sleep()

A sleep() function is a function that allows you to stop the execution of code for a certain amount of time. Using a function similar to this can be interesting for many reasons: from waiting for some condition to be met before continuing with the code, to simulating during development an asynchronous connection that takes a long time to return something.

Almost all languages and platforms have some way of doing this, but JavaScript does not have this functionality natively. In this article we are going to see how to implement a sleep() function in JavaScript using two different methods: the classic and the modern, explaining how to achieve this and what their advantages and disadvantages are.

sleep() with "classic" JavaScript (ECMASCript 5)

Back in the days of ECMAScript 5 (i.e. before 2015) the only way to simulate a sleep() function was to run a crazy loop for as long as we were interested in "stopping" the execution of the code. The implementation of a sleep() function would look something like this:

var sleepES5 = function(ms){
var waitUntil = new Date().getTime() + ms;
while(new Date().getTime() < waitUntil) continue;
};

As you can see, what it does is to add up the number of milliseconds passed as a parameter and run a loop without doing anything until the stipulated time has elapsed. It couldn't be simpler.

Then you could put it in a code fragment to stop it for a while by writing something like this:

function testES5(){
console.log(>'we start the test.');
sleepES5(3000);   //We sleep the execution for 3 seconds
console.log(>'End of test function.');
};

This does the job, and can be useful for development testing and the like, but it has several drawbacks:

1. The execution does not really stop, since what is being done is to execute a loop thousands of times while we wait. So it is using CPU and, in fact, if you set a longer or shorter time (a few seconds, depending on the browser), you will end up getting a warning message to stop the execution.

2. The user interface crashes. Since JavaScript has only a single thread, it cannot execute two tasks at the same time (and the code is not in a Web Worker or a Service Worker), so during the wait the UI stops responding. In reality, the clicks and actions you perform are queued and executed when the execution of the "runaway" code finishes.

If in our example we place a button that you can press during the wait to do something else, it will ignore it until the execution is finished.

Note that the execution stops for 3 seconds, but the button presses are only executed when the wait is over. In other words, the wait is not a wait, but a blocking of execution for the indicated time.

Moreover, if we look at the browser's task manager and look at the CPU usage of the page during timeout, we will see that it reaches very high peaks of usage (which depend on the power of your computer).

As I say, it's a "trick" that works, but it's not a real sleep() and presents problems. But well, in "classic" JavaScript, before ES6, it was the solution we had.

sleep() with modern browsers (ES6)

One of the big and long-awaited new features when ECMASCript 6 came out was the addition of the promise feature to the language.

A promise is an object representing a task that "promises" to be executed at some point in time (in the future or even in the past, although it may seem counterintuitive), and they are ECMAScript's native mechanism for executing code asynchronously.

As promises have their complexity, the async and await keywords were also incorporated into the language to simplify the handling of asynchronous functions with promises.

Let's take advantage of this functionality to create a sleep() function that actually works as expected.

Doing so is actually quite simple, as we only need to return a promise and have it automatically resolved after the specified time. In other words, the code is the following:

var sleep = function(ms){
return new Promise(resolve => setTimeout(resolve, ms));
};

The promise is created and a timeout is specified as a resolution function, which is executed at the end of the specified time. The timeout function has access to the value of the variable ms thanks to the function closure.

It couldn't be easier!

OK, let's see how this would run in our code now:

async function pruebaES6(){      
console.log('we start the test');      
await sleep(3000);    
//We sleep the execution for 3 seconds      
console.log('End of test.'); 
};

Note that the function calling our sleep() function, like any function calling an asynchronous method, must have an async modifier in front of it. And the call must be preceded by an await .

During the 3-second wait, we have pressed the send console message button 3 times, as in the previous example.

If you look closely and compare it with the execution of "traditional" code you will see that, apart from executing the wait, now the user interface does not block and when we press the other button the messages arrive at the console at the same time we do it. That is, this sleep() really stops the execution of our code and also does not block the main thread of the browser and therefore everything is interactive.

And what about processor usage?

Well, during the whole time the execution is stopped, the CPU usage is 0%:

So, perfect! We've got a real, working sleep() with no disadvantages for doing so.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.