JavaScript clearTimeout()

Syntax of clearTimeout() in Javascript

The syntax for setTimeout() is:

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

You can also try this code with Online Javascript Compiler

Run Code

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);

You can also try this code with Online Javascript Compiler

Run Code

Parameters of JavaScript clearTimeout()

The clearTimeout() function in JavaScript takes a single parameter: the ID of the timeout to be cleared. This ID is generated when you set a timeout using setTimeout(). Passing this ID into clearTimeout() stops the timer, preventing the specified function from executing if the delay has not yet expired.

Return Value of JavaScript clearTimeout()

The clearTimeout() function does not return any value; it simply cancels the timeout associated with the provided ID.

Exceptions of JavaScript clearTimeout()

The clearTimeout() function does not throw any exceptions if an invalid or non-existent ID is passed. If the ID doesn’t match any active timer, the function simply does nothing. This silent handling allows clearTimeout() to be called without risk of breaking code execution, even if the timer has already expired or was never set.

How does clearTimeout() in JS work?

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);

You can also try this code with Online Javascript Compiler

Run Code

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);

You can also try this code with Online Javascript Compiler

Run Code

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

Practical Usage of JSclearTimeout()

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);
});

You can also try this code with Online Javascript Compiler

Run Code

Supported Browser

Frequently Asked Questions

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.

Does clearTimeout() work on intervals set by setInterval()?

No, clearTimeout() does not work on intervals set by setInterval(). It is specifically designed to stop timeouts created by setTimeout(). To clear intervals, the clearInterval() method should be used instead.

Can clearTimeout() be used without storing the timeout ID?

clearTimeout() cannot be used effectively without storing the timeout ID, as the ID is needed to identify and cancel the specific timeout. Without it, the timeout will continue until completion.

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.