How To Make Javascript Wait

by

JavaScript is a powerful and flexible language that allows you to create dynamic and interactive web pages. However, sometimes we need to control the flow of our code and make JavaScript wait before executing certain tasks. This can be useful, for example, when you want to add a delay between animations or when you need to wait for some data to be loaded.

Introducing setTimeout and setInterval

JavaScript provides two built-in functions to delay the execution of your code: setTimeout and setInterval. Both functions allow you to specify a callback function and a delay time in milliseconds.

setTimeout

The setTimeout function executes the callback function only once after the specified delay time has passed. Here’s an example:

setTimeout(function() {
    console.log('This message will be displayed after 2 seconds');
}, 2000);



setInterval


The setInterval function, on the other hand, executes the callback function repeatedly at the specified delay interval. Here’s an example:


let counter = 0;
const intervalId = setInterval(function() {
    counter++;
    console.log('This message will be displayed every second. Counter: ' + counter);

    if (counter === 5) {
        clearInterval(intervalId);
    }
}, 1000);



In the example above, the message will be displayed every second, and the counter will be incremented. The interval will be cleared after the counter reaches 5, stopping the repeated execution of the callback function.


Using Promises and Async/Await


With the introduction of Promises and Async/Await in modern JavaScript, it’s now even easier to make your code wait before executing certain tasks. Promises and Async/Await allow you to write cleaner and more readable code, especially when dealing with multiple asynchronous operations.


Creating a Delay Function using Promises


First, let’s create a delay function that returns a Promise which resolves after a specified amount of time:


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



Now, you can use this delay function along with the .then() method to chain your asynchronous operations:


delay(2000)
    .then(() => console.log('This message will be displayed after 2 seconds'))
    .then(() => delay(1000))
    .then(() => console.log('This message will be displayed 1 second after the previous message'));



Using Async/Await with the Delay Function


To make your code even easier to read and understand, you can use the async/await syntax with the delay function:


async function myFunction() {
    console.log('Starting the function');
    await delay(2000);
    console.log('This message will be displayed after 2 seconds');
    await delay(1000);
    console.log('This message will be displayed 1 second after the previous message');
}

myFunction();



Now you have a clean and easy-to-understand way of making your JavaScript code wait before executing specific tasks. Remember that the async/await syntax should only be used within an async function.


Conclusion


In this blog post, we’ve explored different ways to make JavaScript wait before executing specific tasks. You can use setTimeout and setInterval for simple use cases, but for better control over the flow of your code and improved readability, consider using Promises and Async/Await. Happy coding!