JavaScript clearTimeout()

Syntax of JavaScript clearTimeout()

Let us look at the syntax of the claerTimeout javascript function:

Parameters of JavaScript clearTimeout()

clearTimeout() javascript function takes only a single integer as a parameter. Also, cleartimeout javascript function's parameter which is usually represented as timeoutID is the value returned by the function call of setTimeout() javascript function, and by using this ID we can stop the execution of the function passed to setTimeout() function.

Return Value of JavaScript clearTimeout()

clearTimeout() javascript function return Nothing (None) or we can say an undefined value is returned by cleartimeout javascript function.

Exceptions of JavaScript clearTimeout()

clearTimeout() javascript function works fine in every scenario means if the passed argument is valid and there is a corresponding setTimeout() call then it will stop its code execution otherwise cleartimeout javascript function will simply do nothing.

Example

Let’s take a real-life scenario of pizza ordering online: when we order Pizza online and the pizza shop starts the count down of 30 minutes. But it may be possible pizza may be delivered before time, so in this case, the delivery man stops the countdown to push the notification of the pizza delivered otherwise after 30 minutes it will push the notification that the pizza is free. Similarly, with the help of the setTimeout() function in javascript we can start the count down and after 30 minutes it will give an alert that pizza is free. And if delivered before time then with the help of the clearTimeout() javascript function we can stop it.

Let's take a simple example to show the working of the clearTimeout() function. In this example, we will make a call to setTimeout() function and store its returned value. Then later we will cancel the execution of the code passed to setTimeout() function by using the clearTimeout() function.

Code:

In the above code, we created two buttons, one indicates getAlert and by using the setTimeout() function we defined it to execute a code to pop up an alert after the 3000 milliseconds. On the other hand, we also created another button cancelAlert and on clicking it, it will call the clearTimeout() function to stop the execution of the previous code. We defined a variable temp to store the return value of setTimeout() function and pass as variable to clearTimeout() function.

How Does JavaScript clearTimeout() Work?

To find out the working and the use of the clearTimeout() javascript function, let’s take an example of a Reminder Clock.

In Reminder Clock, the user can set a particular time after how long the clock has to ring to give the reminder. There may be a possible case in which the user reminds himself before the time or not required the clock to ring then the user can off the reminder clock from ringing to get an alert. Similarly, in javascript programmer can get an alert message or can execute any particular piece of code after a particular time using the setTimeout() javascript function. But, it might be possible programmer does not need that execution of code anymore and want to stop it, this is possible by using the integer value which is the return value of that particular call to setTimeout() function, and passing that to clearTimeout() javascript function.

clearTimeout() function is a simple function, if the passed parameter value belongs to a setTimeout() function which is not executed yet, then cleartimeout javascript function will cancel it, otherwise, it does nothing.

More Examples

Let’s create a stopwatch to show the functioning of the clearTimeout() javascript function. In this example, we will define three buttons, one button will be reset and it will reset the count of the stopwatch, another button will be started and it will start the counting from either start (after reset or the first time starting) or from where the last time stoped. This button will call the setTimout() function in the loop which will increase the count in every single second or 1000 milliseconds. The last button will be the stop and this button will stop the counting by using the clearTimeout() function.

Output:

In the output, we will get a reset button to reset the count and stop the stopwatch. A start button to start the count and a stop button to stop the counting. Also, we have a display to show the count.

Explanation:

In the above code, first, we created three buttons reset, start, and stop and an input area to show the count. We have added a script for all the buttons, starting with defining some variables to store the count of seconds, return the value of the setTimeout() function, and indicate to the time is on or not.

The start() function will contain the call to setTimeout() function, stop() and reset() functions will conaints the call to clearTimeout() function with only difference reset() function makes count zero and stop() function only stops the counting.

Supported Browser

clearTimeout() javascript function is supported in almost every famous or most commonly used browser, let's look into some of the browsers with the minimum version required: