JavaScript offers a pre-defined “clearTimeout()” method that manages the time-out functionality. It allows users to cancel out the time interval which is previously established by the “setTimeout()” function. It stops the execution of the code block that repeats after the specific time interval. It is mostly used for banking and e-commerce websites to cancel out scheduled tasks.

This post will explain how to handle JavaScript clearTimeout() function.

How to Handle JavaScript “clearTimeout()” Function?

The “clearTimeout()” function cancels the time interval that was earlier set with the help of the “setTimeout()” function. The “setTimeout()” function sets the time interval to perform a specific task repeatedly within it.

Syntax

The working of the “clearTimeout()” method depends on its basic syntax that is written below:

According to the above syntax, the “clearTimeout()” takes the “id” of the “setTimeout()” function and stops the time interval. If the user does not pass the id then it performs nothing.

Let’s implement the above-defined function by using its basic syntax.

Example 1: Applying the “clearTimeout()” Function to Stop the Set Time Interval

The first example applies the “clearTimeout()” function to stop the set time interval.

First look at the following HTML code:

In the above code lines:

• The “<center>” tag sets the alignment of the given HTML elements to the center of the web page.
• The “<p>” tag specifies a paragraph statement.
• The “<h2>” tag is an empty heading element with an id “H2”.
• The “<button>” tag inserts the button element that calls the “stop()” function when its attached “onclick” event is triggered.

Next, apply the “clearTimeout()” function using the stated code block:

In the above code snippet:

• The “setTime” variable applies the “setTimeout()” function that passes the “start” function as its first parameter and the specified “no of milliseconds” as the second parameter. This function executes the “start” function in a specified time interval.
• Next, define the “start()” function.
• In this function, the “document.getElementById()” method is applied to access the empty heading element whose id is “H2” and append it with the given text statement.
•  After that, the “stop()” function is defined, which applies the “clearTimeout()” method passing the id of the “setTimeout()” function to stop its time interval.

Output(Before Stop Execution)

Now the output shows a heading element in a specified time interval before stopping the time interval set via the “setTimeout()” method.

Output(After Stop Execution)

The given button click stops the time interval that has been set for displaying the heading element.

Example 2: Applying the “clearTimeout()” Function to Stop a Function

This example utilizes the “clearTimeout()” function to stop the execution of a function:

First, go through the provided HTML code:

In the above code block:

• The “<button>” tag attaches the “onclick” event to invoke the “start()” function when it is clicked.
• The “<input>” tag adds an input field with the type “text” and an id “field”.
• The next “<button>” also attaches the “onclick” event to call the “stop()” function when this event is fired.

Now, apply the “clearTimeout()” function using these code lines:

In the above lines of code:

• Firstly, the “let” keyword declares three variables “counter”, “setTime”, and “timer_on”.
• Next, the “count()” function is defined.
• In its definitions, the “document.getElementById()” method is applied to access the added input field using its id “field” and append it with the value of the “counter” variable.
• Now, increment the value of the “counter” variable.
• Lastly, apply the “setTimeout()” method to perform the execution of the “count()” function in a given time interval.
• After that, define a function named “start()”.
• In this function, an “if” statement is used that specifies a condition i.e. if “imer_on” is not “on” then it is equal to “1” and the “count()” function is called.
• Now, another function is defined named “stop()”.
• In its definition, the “clearTimeout()” method is applied passing the id of the “setTimeout()” method i.e. “setTime”.

Output

It can be observed that the “Start count” button starts the count that increments after every 1 second. This count stops by clicking on the “Stop count!” button.

That’s all about handling the clearTimeout() function in JavaScript.

Conclusion

The “clearTimeout()” function handles the time interval specified with the help of the “setTimeout()” function. It performs this task by passing the id of the “setTimeout()” function as its essential parameter. It is used for the cancelation of the tasks performed in the specified time interval that is been set using the “setTimeout()” function. This post has practically explained the procedure to handle JavaScript clearTimeout() function.