Skip to content
Related Articles

Related Articles

JavaScript | clearTimeout() & clearInterval() Method

View Discussion
Improve Article
Save Article
  • Last Updated : 05 Aug, 2022
View Discussion
Improve Article
Save Article

Prerequisite: setTimeout() and setInterval() 

clearTimeout() 
The clearTimeout() function in javascript clears the timeout which has been set by setTimeout()function before that.

  • setTimeout() function takes two parameters. First a function to be executed and second after how much time (in ms).
  • setTimeout() executes the passed function after given time. The number id value returned by setTimeout() function is stored in a variable and it’s passed into the clearTimeout() function to clear the timer.

Example: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Windows clearTimeout() method
    </title>
</head>
 
<body>
 
    <button id="btn" onclick="fun()" style="color: blue;">
        GeeksForGeeks</button>
    <button id="btn" onclick="stop()">Stop</button>
    <script>
        var t;
 
        function color() {
            if (document.getElementById('btn').style.color == 'blue') {
                document.getElementById('btn').style.color = 'green';
            } else {
                document.getElementById('btn').style.color = 'blue';
            }
 
        }
 
        function fun() {
            t = setTimeout(color, 3000);
 
        }
 
        function stop() {
            clearTimeout(t);
        }
    </script>
</body>
 
</html>


Output:

 

 

Explanation: 
The GeeksForGeeks button color changes after 3 seconds for just one time. Click on Stop before 3 seconds after clicking GeeksForGeeks button to clear Timeout. 

clearInterval() 
The clearInterval() function in javascript clears the interval which has been set by setInterval() function before that.

  • setInterval() function takes two parameters. First a function to be executed and second after how much time (in ms).
  • setInterval() executes the passed function for the given time interval. The number id value returned by setInterval() function is stored in a variable and it’s passed into the clearInterval() function to clear the interval.

Example: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Windows clearInterval() method
    </title>
</head>
 
<body>
    <button id="btn" onclick="fun()" style="color: blue;">
        GeeksForGeeks</button>
    <button id="btn" onclick="stop()">Stop</button>
    <script>
        var t;
 
        function color() {
            if (document.getElementById('btn').style.color == 'blue') {
                document.getElementById('btn').style.color = 'green';
            } else {
                document.getElementById('btn').style.color = 'blue';
            }
 
        }
 
        function fun() {
            t = setInterval(color, 3000);
 
        }
 
        function stop() {
            clearInterval(t);
        }
    </script>
</body>
 
</html>


Output:

  

Explanation: 
In this example, the GeeksForGeeks color changes and stays the same for every 3 seconds, after that it changes again. Click on Stop to clear the interval. 

Supported Browser: The browser supported by clearTimeout() & clearInterval() Method are listed below:

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 4.0
  • Safari 1.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!