Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is clearTimeout()?
2.1.
Syntax
3.
Working of clearTimeout()
4.
Practical Usage
5.
Frequently Asked Questions
5.1.
What does clearTimeout() do in JavaScript?
5.2.
What does clearTimeout() need as an argument?
5.3.
Can clearTimeout() be called multiple times on the same timer?
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

JavaScript clearTimeout()

Author Nikunj Goel
0 upvote

Introduction

JavaScript, as a powerful, high-level, and interpreted programming language, has a vast library of built-in functions. These functions make it a versatile tool for web development. One such function is the clearTimeout() function, often used in conjunction with setTimeout(). This article will discuss what clearTimeout() is, how it works, and when to use it.

JavaScript clearTimeout()

What is clearTimeout()?

In Javascript, clearTimeout() is a method that stops a previously set timer created by setTimeout(). setTimeout() is a function that executes a piece of code after a specified delay.

Syntax

The syntax for setTimeout() is:

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...);

 

The setTimeout() function returns an ID that can be used to stop the timer. To cancel the timer, you can pass this ID to clearTimeout().

The syntax for clearTimeout() is:

clearTimeout(timerId);
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Working of clearTimeout()

Let's create a simple example. Suppose we set a function to execute after 5 seconds using setTimeout():

let timerId = setTimeout(() => {
    console.log("This message will never show up.");
}, 5000);

 

Now, if we use clearTimeout(timerId); before the 5 seconds pass, the message will never be logged to the console because the timer will be cancelled.

clearTimeout(timerId);

 

As soon as JavaScript executes clearTimeout(), it stops the timer and the code within setTimeout() will not be executed.

Practical Usage

In real-world scenarios, clearTimeout() can be very useful. For example, consider a scenario where you're creating a live search feature. As a user types into a search box, a request is sent to the server to fetch matching results.

However, you don't want to send a request for every keystroke — that would be inefficient. You decide to use setTimeout() to delay the request by 1 second, providing time for the user to finish typing. But what happens if the user types another character within that 1 second? The request should be cancelled and a new one created.

Here is where clearTimeout() comes into play. You can cancel the previous request timer and create a new one with every keystroke:

let timerId;
document.getElementById('search-box').addEventListener('keyup', function(e) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
        // send request
    }, 1000);
});

Frequently Asked Questions

What does clearTimeout() do in JavaScript?

clearTimeout() is used to stop a timer that has been previously set with setTimeout().

What does clearTimeout() need as an argument?

clearTimeout() takes one argument, which is the ID value of the timer returned by the setTimeout() function.

Can clearTimeout() be called multiple times on the same timer?

Yes, it can be called multiple times, but after the first call, subsequent calls will have no effect.

Conclusion

clearTimeout() is an essential function in JavaScript, especially when dealing with timers or delays in code execution. Its primary use is to stop the execution of the function specified in setTimeout(). Mastering clearTimeout() can help optimize your web applications, making them more efficient and responsive. It's these little functions and their correct use that can truly enhance the performance of your web application.

Previous article
JavaScript Promise.all() Method
Next article
JavaScript onkeyup
Live masterclass