Introduction

In JavaScript, setTimeout and clearTimeout are important functions for handling time-based operations. setTimeout schedules a function to run after a specific delay, while clearTimeout cancels a scheduled timeout. These functions are valuable for managing asynchronous tasks and controlling when functions should execute. In this JavaScript journal, we are going to be learning the setTimeout and, clearTimeout, so that developers can effectively handle delays and enhance the responsiveness of their JavaScript applications.

setTimeout() function

The setTimeout function is used to schedule the execution of a function after a specified delay. It takes two parameters: the function to be executed and the delay in milliseconds respectively. Here's an example:

// Function to be executed after a delay
function greet() {
  console.log("Hello, JavaScript Masters");
}

// Scheduling the function execution after 2000 miliseconds (2 seconds)
const timeoutID = setTimeout(greet, 2000);

// Output: Hello, JavaScript Masters (after 2 seconds)

In the code snippet, the greet function is scheduled to execute after a 2-second delay using setTimeout. When the specified delay (2000 milliseconds) elapses, the function is executed, and "Hello JavaScript Masters!" is logged to the console.

Multiple setTimeout

You can schedule multiple functions to execute at different delays using setTimeout. Each call to setTimeout() will return a unique timeout ID, which can be used with clearTimeout to cancel specific timeouts.

function greet() {
  console.log("Hello, JavaScript Masters!");
}

const timeoutID1 = setTimeout(greet, 2000); // Executed after 2 seconds 
const timeoutID2 = setTimeout(greet, 5000); // Executed after 5 seconds

// Cancelling the second timeout
clearTimeout(timeoutID2)

// Output: Hello, JavaScript Masters! (after 2 seconds)

In the code snippet above, we have two setTimeout calls scheduled to execute the greet function after 2 and 5 seconds respectively. We cancel the second timeout using clearTimeout with the corresponding timoutID2, resulting in only the first timeout being executed.

clearTimeout() function

This function is used to cancel a scheduled timeout before it executes. It takes the timeout ID returned by setTimeout as its parameter. Here's an example:

function greet() {
  console.log("Hello, JavaScript Masters");
}

// Scheduling the function execution after 2000 miliseconds
const timeoutID = setTimeout(greet, 2000);

// Cancelling the scheduled timeout
clearTimeout(timeoutID);

// No output since the timeout is cancelled before execution

In the code snippet above, we schedule the greet() function to execute after 2 seconds using setTimeout(). However, immediately after that, we use clearTimeout() to cancel the scheduled timeout by passing the timeoutID returned by setTimeout. As a result, the function is never executed, and no output is logged to the console.

Conclusion

In this article, we have learned that setTimeout() and clearTimeout are useful tools for managing delays and asynchronous tasks in JavaScript by providing control over the timing of execution and allow for canceling timeouts when needed, adding flexibility to our code.

PS: Dear readers, welcome to this article, where I share my learning journey focused on JavaScript. I am excited to delve into the world of JavaScript and invite you to join me on this path of exploration and growth. Let's embark on this learning journey together!

Credits

• Traversy Media

• Cover Image