To force a 1 second pause or delay in JavaScript we can use the setTimeout function, but if we want a better solution we should use the Promise function.

Allow me to explain myself.

There are quite a few ways to tell JavaScript to wait for 1 second. Some are better than others and some should only be used in specific circumstances.

Wait using setTimeout

One of the easiest way to achieve a 1 second delay is by using the setTimeout function that lives on the window global object.

Here's an example:

console.log("Executed now");

// 1 second delay
setTimeout(function(){
    console.log("Executed after 1 second");
}, 1000);

The setTimeout function takes two parameters. One is the callback function that will get executed after a specific time, and the other is the number of milliseconds we want to delay the execution. In this case, we are using 1000ms, which is the equivalent of 1 second.

Now, this looks great and simple! However, here's the trick:

console.log("Executed now");

// 1 second delay
setTimeout(function(){
    console.log("Executed after 1 second");
}, 1000);

// Notice this!
console.log("Executed before the delay, but after the 1st console.log");

Notice how our setTimeout function runs asynchronously and that it won't stop the flow of our program. This means that anything defined after it on the code will run before the delay.

This will very probably be ok in any circumstance, and the solution to it can be as simple as placing the rest of the code inside the timeout too, but it is not something that can serve us in every scenario.

Also, if you want to keep on adding delays inside the same delayed function, we can easily run into what is known as the callback hell (and that's not pretty).

Therefore, keep on reading!

Wait using Promise

Another way to make an asynchronous wait with moder JavaScript is by using the Promise function.

Note that Promises are part of the ES6 standard and won't work in some legacy browsers such as IE 11. Check out the compatiblity table.

If we combine the setTimeout function with promises, we can then create a more readable code and place our whole code inside the same (async) function.

The main advantage compared to the setTimeout method we explained before, is that we can re-use the delay function. Making our code much more clean and simple.

function delay(milliseconds){
    return new Promise(resolve => {
        setTimeout(resolve, milliseconds);
    });
}

async function init(){
    console.log("Executed now");

    await delay(1000);

    console.log("Executed after 1 second wait");

    await delay(1000);

    console.log("Executed after 2 seconds wait");
}

init();

console.log("Executed after the 1st log and before the 2 delays");

You can test it here:

See the Pen on CodePen.

Wait using a loop

This is the only way to completely break the user flow and force JavaScript to do a synchronous pause.

It's not the perfect solution and I would argue is probably undesirable. JavaScript is an asynchronous language and we should take advantage of it instead of using hacky solutions to make our code synchronous.

Nevertheles, here's how to do it:

var wait = (ms) => {
    const start = Date.now();
    let now = start;
    while (now - start < ms) {
      now = Date.now();
    }
}

console.log("Executed now");
wait(1000);
console.log("Executed after 1 second");

We basically check the current time with the Date function and we create a do ... while loop that will only exit if more than 1000 milliseconds have passed since we started the loop.

See the problem here? We are basically having our computer/browser busy by running a "nonsense" loop and comparing dates just for the fact of getting our delay.

If instead of 1 second we have longer wait chances are that our browser crashes or that our page stops responding as usual. And even if we use a 1 second value, things might not always work as we expect. The DOM render happens after the JavaScript functions stack has cleared and the browser is free to accept new events.

And to proof it, see the following example, where the console.log gets fired after 1 second (as we would expect), but both of the DOM writes happen at the same time:

See the Pen on CodePen.

If possible, avoid this solution in favor of the previous ones.

Conclusion

From the 3 ways of making JavaScript wait 1 second (or any other lapse of time), you should be fine by using any of the first two ones.

I've used setTimeout multiple times and it works perfectly on most occasions.

However, the modern way of pausing the execution with promises can give you more flexibility and create more maintainable code in the long run.