JavaScript | clearTimeout() & clearInterval() Method

August 11, 2022 | by Arround The Web | No comments

JavaScript | clearTimeout() & clearInterval() Method

JavaScript offers numerous methods to fulfill the requirements of programmers by executing the block of code. For scheduling a timeout, JavaScript provides methods including setInterval(), setTimeout, clearTimeout(), and clearInterval(). It provides a timeout functionality that allows users to perform any operation after a specific time interval. Moreover, the piece of code is repeated after a set interval of time. These methods are useful for sensitive websites such as banking websites and e-commerce sites.

This post demonstrates the working and usage of clearTimeout() and clearInterval() methods:

How to Utilize clearTimeout() Method in JavaScript
How to Utilize clearInterval() Method in JavaScript

JavaScript clearTimeout() and clearInterval() Methods

In JavaScript, the clearTimeout() and clearInterval() methods are used to clear the timer that was initialized using the setInterval() and setTimeout() methods, respectively. The clearTimeout() method cancels the timeout that was earlier set by the setTimeout(). The same procedure is applied using clearInterval() to cancel the time interval fixed by setInterval().

How to Utilize the clearTimeout() Method in JavaScript?

The clearInterval() method is utilized to stop the execution that started with the setTimeout() method. The method takes the same variable name that was returned by the setTimeout() method. The syntax of the clearTimeout() method is provided here:

Syntax

clearTimeout(timeoutID);

The timeoutID is the value of the timer set by the setTimeout() method. It is a mandatory field.

Example

An example is explained with the usage of the clearTimeout() method in JavaScript.

Code

<html>
<body>
<h2> An example of using the clearTimeout() method in JavaScript</h2>
<button onclick="startCount()">Press Button to Start counter</button>
<input type="text" id="txt">
<button onclick="stopCount()">Press Button to Stop counter</button>
<script>
var timer = 0;
var time;
var counter = 0;
function timedCount() {
document.getElementById("txt").value = counter;
counter = counter + 1;
time = setTimeout(timedCount, 1000);}
function startCount() {
if (!timer) {
timer = 1;
timedCount();}}
function stopCount() {
clearTimeout(time);
timer = 0;}
</script>
</body>
</html>

In the above code, the clearTimeout() method is utilized with the setTimeout() method to differentiate the working process between them. The description is provided in the listed format:

Firstly, a button “Press Button to Start counter” is attached with a startCount() method.
Another button is associated with the stopCount() method to stop the execution of the above method.
After pressing the button, the counter variable is initialized and incremented by one every 1000 milliseconds.
These values are stored in the time variable that is utilized to stop the counter by passing it to the clearTimeout() method.

The screenshot of the above code is as follows:

Output

It is observed that the counter starts after pressing the “Press Button to Start counter” button. The counter increments the value by adding one. The process is continued until the “Press Button to Stop counter” button is pressed.

How to Utilize the clearInterval() Method in JavaScript?

This method clears the schedule created by the setInterval() method. The execution of the created timer is finished by passing the same variable that was returned from the setInterval() method. The following syntax refers to the setInterval() method.

Syntax

clearInterval(intervalID)

In this syntax, the intervalID is the passing variable that utilizes the same value as the setInterval() method.

Example
The example code written below refers to the clearTimeout() method in JavaScript.

Code

<h2> An example of using the clearInterval() method in JavaScript</h2>
<p>Press Button to start an interval that prints a message. </p>
<button id="btn" onclick="Result()">Press Button to Start Interval</button>
<button id="cancel">Press Button to cancel interval</button>
<div id="output"></div>
<script>
function Result() {
document.getElementById('cancel').addEventListener('click', () => { cancelInterval() })
const intervalID = setInterval(() => {
document.getElementById('output').textContent += "Is JavaScript a Scripting Language ? ";
},500);
function cancelInterval() {
clearInterval(intervalID);
document.getElementById('output').textContent = " Cancelled Interval !";
}
}
</script>

The code is described as:

Two buttons are associated with the methods.
The Result() method is employed with a button “Press Button to Start Interval”.
First, the interval is set by the setInterval() method.
After that, a message asking, “Is JavaScript a scripting language?” is displayed every 500 milliseconds.
In the end, the clearInterval() method is used by passing the same variable returned by the setInterval() method.

Output

In the output, the message “Is JavaScript a scripting language?” is displayed repeatedly by pressing the Start Interval button. After that, the clearInterval() method is utilized to stop the execution and display a message “Canceled Interval”.

Conclusion

JavaScript provides functionality to stop the execution of code by utilizing the clearTimeout() and clearInterval() methods. The clearTimeout() method is employed to clear the timer value set by the setTimeout() method. On the other hand, the clearInterval() method stops the interval by passing the same value set by the setInterval() method in JavaScript. Here, you have learned to understand the clearTimeout() and clearInterval() methods in JavaScript.

Source: linuxhint.com