In this tutorial, you will learn how to use the JavaScript setTimeout() that sets a timer and executes a callback function after the timer expires.🤠

setTimeout() is a commonly used function in JavaScript. It sets a timer (a countdown set in milliseconds) for the execution of a callback function, calling the function upon completion of the timer.

JavaScript SetTimeout is one of the crucial methods you might come by. If you want to acquire a solid grip in the setTimeout () function in javascript, then this article is for you, so let’s get started.😉

What is SetTimeout() function?🤔

SetTimeout() method makes a code asynchronous. The code inside the setTimeout runs after the user-defined timer gets completed. The timer is also known as the delay before the code runs inside the setTimeout.

Syntax

setTimeout(() => { // this is the function (arrow function)

}, timeout); // this is the delay

Here in the setTimeout, we have written a function that will execute after the delay expires. And the delay will be counted in milliseconds.

Example:

setTimeout(() => {
    console.log("Hi I am Chhakuli")
}, 2000);

//Hi I am Chhakuli

Here we are executing the function after the timer expires. That’s why the arrow function will execute after 2 seconds and print “Hi I am Chhakuli”😄.

How to use setTimeout?🧐

To use setTimeout,

• First, you need to create a function that contains the code that you want to execute.
• This function can take one or more arguments, but the first argument must be the code to execute, and the second argument must be the amount of time to wait before executing the code (in milliseconds).

Once you have created your function, you can then call setTimeout😯, passing in your function as the first argument and the amount of time to wait as the second argument.

Syntax

setTimeout(function, milliseconds, arg1, arg2, ...)

Parameters💥

• function: After the specified time period, this is the function that is executed.
• milliseconds: The delay time is expressed in milliseconds.
• arg1, arg2: If needed, these are the optional parameters.

Example code:

setTimeout(() => {
  // Code to execute goes here
}, 1000); // Wait 1 second before executing code

How to Cancel setTimeout😯

The setTimeout method is a great way to ensure that your code executes at the precise moment you want it to. However, there are times when you may need to cancel a setTimeout method before it has finished executing.

To do this,

• First, call the clearTimeout() function with the id of the timeout you wish to cancel as its argument.
• This will immediately stop the execution of the timeout whose id was passed in.
• Next, if desired, execute any additional code needed when a timeout is canceled.

Syntax:

clearTimeout(id);

Here’s an example of the clearTimeout() function:

const timeoutId = setTimeout(function(){
    console.log("Hello World");
}, 2000);

clearTimeout(timeoutId);
console.log(`Timeout ID ${timeoutId} has been cleared`);

Conclusion🙆‍♀️

In conclusion, setTimeout is a powerful JavaScript function that can be used to improve the performance of your web applications. By understanding how it works and how to use it effectively, you can create more efficient code.

In this blog post, we have seen how setTimeout works and some of the interesting things that can be done with it. Try out multiple examples and see how they work to develop an in-depth understanding🤓.

Thanks for reading!❤️ If you enjoyed this blog, please share it with your friends! Please feel free to reach out to me if you have any questions or comments, I’m always happy to help.

Happy coding! 🙂