JavaScript

Applying JavaScript’s setTimeout Method


With the evolution of the internet, JavaScript has grown in popularity as a programming language due to its many useful methods. For example, many websites use JavaScript’s built-in setTimeout method to delay tasks. The setTimeout method has many use cases, and it can be used for animations, notifications, and functional execution delays.Because JavaScript is a single-threaded, translative language, we can perform only one task at a time. However, by using call stacks, we can delay the execution of code using the setTimeout method. In this article, we are going to introduce the setTimeout method and discuss how we can use it to improve our code.

The setTimeout method is a built-in method that takes a callback function as an argument and executes it after a given amount of time. The syntax for the setTimeout method is as follows:

setTimeout(callbackFunction, delay, arguments...)

The callbackFunction is the function we want to execute after a given amount of time; the delay is the time in milliseconds after which we want to execute the callback function; and the arguments are other parameters we want to pass to the callback function.

Now, we will apply the setTimeout method. First, we define a function called linuxhintFunc that prints the string “Hello from Linuxhint.”

function linuxhintFunc() {
 console.log("Hello from Linuxhint.");
}

Next, we call linuxhintFunc in setTimeout and provide a time delay of 2000 ms (2 s).

setTimeout(linuxhintFunc, 2000)

Once the web page is loaded, there is a delay of 2 s before the function is called. We can perform the same task using the arrow function or an anonymous function.

setTimeout(() => {
  console.log("Hello from the Linuxhint");
}, 2000)


Again, there is a delay of 2 s.

Note: The setTimeout method is an asynchronous method, which means that, although JavaScript is a single-threaded language, this function runs on a different thread. The setTimeout method places the function in the queue of the call stack and waits until the call stack is free. If we try to print a message or run a function in setTimeout without a delay, then this action would be jump to the front of the queue first and run when the setTimeout method is executed.

console.log("Hello from the Linuxhint-1")

setTimeout(() => {
  console.log("Hello from the Linuxhint-2")
}, 0)

console.log("Hello from the Linuxhint-3")


Looking at the output, the order of the output is not the same as that of the input. Therefore, the setTimeout function can delay the execution of code.

Conclusion

This article introduces JavaScript’s built-in setTimeout method and discussed how we can use it. We hope that you learned something from this article and that you continue learning about JavaScript with linuxhint.com.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.