JavaScript Wait

Introduction

The sleep function, which pauses the execution of code until completion, is not inherently available in JavaScript. For instance, if you want to print three messages to the JavaScript console at one-second intervals, you can utilize setTimeout. This function sets a timer that triggers the given code, serving as the closest alternative in the absence of a sleep method.

Regrettably, the desired behavior of setTimeout is not realized. It is likely that you have tested it within a JavaScript loop and found that setTimeout does not operate as intended.

The setTimeout function follows its own specific rules, which often leads to confusion with the sleep function.

How to write a sleep function in Javascript?

One of the most straightforward approaches to implement a sleep function in JavaScript involves utilizing Promise, Await, and Async in conjunction with setTimeout. The Await keyword allows functions to pause execution until the associated promise is resolved, resembling the functionality of a sleep function. Additionally, you can employ setTimeout routines that increment and decrement in intervals to effectively simulate a sleep function.

What is setTimeout in JavaScript?

An operation scheduled to execute after a specified delay is established through the window object's asynchronous setTimeout method. This timer determines the exact time at which the specified action will be initiated.

You can also invoke setTimeout using window.setTimeout since it is a property of the window object. However, it is common to exclude the window prefix in most cases, as it is generally understood and implied.

Syntax of setTimeout Method

The typical syntax for the setTimeout function is outlined below:

setTimeout(function_name, time);

Let us break it down:

• ✅ One way to create timing events is using the setTimeout function.
• ✅ Two necessary criteria are accepted.
• ✅ The first necessary argument is function_name. The code you wish to run is included in the name of a callback function. The function definition, which houses the actual block of code, is referenced and pointed to by the function name.
• ✅ As a point of reference, one second is equal to 1000 milliseconds. Time is the second necessary element. It stands for the designated wait time in seconds that the program must experience before the function is performed.

In summary, this indicates that the code contained within a specific function will be executed solely one time by setTimeout, and this will occur only after a specified duration has elapsed.

At this juncture, it is essential to highlight that you have the option to provide an anonymous function to the setTimeout method instead of using a named function.

This is particularly useful when the function contains only a limited number of lines of code.

Utilizing an anonymous function signifies that, instead of calling the function by its name as demonstrated previously, the actual code is embedded directly as the initial argument within setTimeout.

setTimeout(function() {
    // Function code goes here
}, time);

It is also crucial to note that the timer generated by setTimeout is recognized by its timeoutID, which is a positive integer returned by the function.

How to Wait N Seconds in JavaScript?

We will illustrate the application of setTimeout through the example provided below:

console.log("JavaScript wait Example");
// This line indicates that the function definition will be executed once 3ms have passed
setTimeout(website, 3000);
//function definition
function website() {
  console.log("Example");
}

Output

JavaScript wait Example
Example

• ✅ JavaScript code is executed in a top-down manner.
• ✅ Upon pressing run, the first line of code is performed instantly.
• ✅ The second line of code states that before the code in the website function is performed, there must be a programmed delay of 3000ms or 3 seconds.
• ✅ You can see that the function's code runs correctly once the 3000ms have elapsed.

Let us take a look at another example:

console.log("Good Morning!");
setTimeout(function() {
  console.log("Good Night!");
}, 1000);
console.log("Good Afternoon!");

Output

Good Morning!
Good Afternoon!
Good Night!

• ✅ The first line of code in the example above, console.log("Good Morning!");, runs immediately.
• ✅ Despite being the last line of code in the file, the line console.log("Good Afternoon!"); performs the same thing.
• ✅ The code for setTimeout says that it must wait one second before executing.
• ✅ The remainder of the code in the file continues to execute throughout that period, though.
• ✅ Rather, console.log("Good Afternoon!"); is run in its place, and that line is temporarily skipped.
• ✅ The code in setTimeout begins to execute when that one second has elapsed.
• ✅ Additionally, you may supply setTimeout with optional parameters.

The greeting function accepts two parameters: phrase and name, as illustrated in the example that follows.

function greeting(phrase,name) {
  console.log(`${phrase}, my name is ${name}` );
}
setTimeout(greeting, 5000,"Welcome all", "Vikram Kumar");

Output

Welcome all, my name is Vikram Kumar

Subsequently, these are directed to the setTimeout function, which will introduce a delay of 5 seconds:

How to Use the clearTimeout Method in JavaScript?

The clearTimeout method enables you to stop the execution of code initiated by setTimeout. In this context, the timeoutID mentioned earlier becomes advantageous.

The standard syntax for the clearTimeout function is as follows:

clearTimeout(timeoutID)

The timeoutID, which is provided with every invocation of setTimeout, needs to be assigned to a variable for this process to operate correctly.

Subsequently, as illustrated below, the timeoutID is provided as a parameter to the clearTimeout function:

let timeoutID = setTimeout(function(){
console.log("Good Night");
}, 3000);
clearTimeout(timeoutID);
console.log("Good Morning!");

Output

Good Morning!

At this juncture, the setTimeout function will cease to execute.

What Is the Difference Between setTimeout and setInterval?

The syntax for both setTimeout and setInterval is very much alike.

The setInterval syntax looks like this:

setInterval(function_name, time);

Nevertheless, the distinct ways in which they operate renders it imprudent to use them interchangeably.

Whereas setInterval triggers a function or activity on a recurring basis, setTimeout is designed to execute a function just a single time.

In the example provided below, the 'js' function is invoked every five seconds:

console.log("JavaScript wait Example");
setInterval(js, 5000);
function js() {
  console.log("Example");
}

Output

JavaScript wait Example
Example
Example
Example
Example
Example
Example
Example
Example
Example
Example
Example
Example
Example
Example
Example
Example
Example
Example
Example

For executing a task at regular intervals, utilizing setInterval is an outstanding choice.

How to Write a Sleep Function in JavaScript?

You can implement a sleep method that behaves as anticipated by utilizing the promise, async (async), and await (await) functionalities.

The await keyword is required to be utilized alongside this custom sleep method, which is exclusively operable within async functions.

Below is an illustration of how to implement a sleep function along with some accompanying code:

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
const repeatedGreetings = async () => {
  await sleep(1000)
  console.log("First")
  await sleep(1000)
  console.log("Second")
  await sleep(1000)
  console.log("Third")
}
repeatedGreetings()

Output

First
Second
Third

Due to the fact that the await keyword pauses the synchronous execution of the code until the Promise has been fulfilled, the JavaScript sleep function behaves exactly as anticipated.

Can JavaScript Sleep Function Work in Loops?

Loops can efficiently employ one of the aforementioned techniques to halt the execution of JavaScript. Let’s take a closer look at two concise examples.

Below is an example of code that demonstrates the implementation of a personalized sleep function:

const sleepnow = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
async function repeatedGreetingsLoop() {
  for (let i = 1; i <= 5; i++) {
    await sleepnow(1000)
    console.log(`Hello #${i}`)
  }
}
repeatedGreetingsLoop()

Output

Hello #1
Hello #2
Hello #3
Hello #4
Hello #5

Below is an example of code that implements timeouts in a more straightforward manner:

for (let i = 1; i <= 5; i++) {
  setTimeout(() => console.log(`Hello #${i}`), 1000 * i)
}

Output

Hello #1
Hello #2
Hello #3
Hello #4
Hello #5

Best Ways to Create a JavaScript Sleep Function

The native setTimeout function provides an easy way to create a sleep or wait function in JavaScript; however, it is important to use it judiciously.

The setTimeout function does not function as a sleep method on its own; however, you can utilize async and await to create a personalized sleep function in JavaScript.

As another approach, you can replicate a sleep function by providing incremental (increasing) timeouts to setTimeout. This can be achieved due to the fact that, as is typical in JavaScript, all invocations of setTimeout execute in a synchronous manner.

Hopefully, this will allow you to introduce a slight pause in your code using only JavaScript, eliminating the necessity for additional frameworks or tools.

Conclusion

In JavaScript, establishing a waiting mechanism is essential for effectively handling asynchronous tasks. Nevertheless, conventional approaches like 'setTimeout' and 'setInterval' may lack accuracy and optimal performance. The most suitable method will depend on your specific needs. The setTimeout function is utilized when you intend to perform an action after a designated period. Conversely, the setInterval function is beneficial when you wish to carry out an action at regular intervals.

Promises are beneficial when you need to execute certain code after a task has been completed, particularly when you require an understanding of the time it will take. They enable you to await the completion of tasks without entirely halting the program, making them quite advantageous. The introduction of Promise syntax along with 'async' and 'await' expressions facilitates the creation of cleaner and more understandable code, minimizing the complexities that typically come with handling asynchronous tasks. The functionality of 'Promise.all' for managing multiple concurrent operations, along with the availability of existing 'async.js' libraries, enhances efficiency in handling waiting processes. Ultimately, mastering asynchronous operations in JavaScript empowers developers to create responsive, efficient, and large-scale web applications.