In this blog, we will see how to use the JS setTimeout() If you're a web developer or just getting started with JavaScript, you might have come across this powerful function before. setTimeout() that sets a timer and executes a callback function after the timer expires🫡

setTimeout() is the most commonly used fn 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.

Understanding SetTimeout() function?🤌

At its core🤠, setTimeout() is a built-in JavaScript function that takes two arguments: a callback function and a delay in milliseconds. Once the specified time has passed, the callback function will be executed, allowing you to perform🔪 tasks asynchronously.

Its syntax and working:

// Syntax: setTimeout(callbackFunction, delayInMilliseconds);
setTimeout(() => {
  console.log("Hello, setTimeout!");
}, 2000); // This will log "Hello, setTimeout!" after a 2000ms (2 seconds) delay.

Here we are executing the function after the timer expires. That’s why the arrow function will execute after 2 seconds and print "Hello, setTimeout!"🫠

How to use setTimeout()💭

to use setTimeout() effectively:

• Create a function containing the code you want to execute.

• The function can take multiple arguments, but the first one should be the code to execute, and the second one should be the delay time in milliseconds.

• Call setTimeout() with your function as the first argument and the desired delay time as the second argument.

Syntax

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

Parameters

• function: This represents the function that will be executed after the specified time period.

• milliseconds: The delay time expressed in milliseconds.

• arg1, arg2: Optional parameters that can be passed to the function if needed.

Example:

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

How to Cancel setTimeout()🐥

There might be instances where you need to cancel a scheduled setTimeout() before its execution😚,

To achieve this:

• Call the clearTimeout() function with the ID of the timeout you want to cancel as its argument.

• This will immediately stop the execution of the specific timeout associated with the provided ID.

• Optionally, you can include additional code to handle any specific actions needed when a timeout is .

Syntax:

 clearTimeout(id);

Example of the clearTimeout() function:

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

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

• The code sets up a setTimeout() function with a delay of 2000 milliseconds (2 seconds) to execute the provided callback function, which logs "Hello World" to the console.

• Before the timeout can trigger and execute the callback, the clearTimeout() function is called with the timeoutId as an argument.

• The clearTimeout() effectively cancels the scheduled timeout, preventing the "Hello World" message from being printed to the console.

• The final console.log() statement confirms that the timeout with the corresponding timeoutId has been cleared.

Conclusion:

The setTimeout() function is a powerful tool for handling asynchronous behaviour in JavaScript.

By understanding its usage, you can implement delays, debouncing, and many other time-based functionalities in your applications. I hope this interactive blog has helped you gain a deeper understanding of setTimeout() and how it can be leveraged effectively in your projects❤️‍🔥.

Feel free to experiment further with the more examples and explore more use cases for the setTimeout() function in your JavaScript endeavours!

Happy coding! See you in our next blog!💗