JavaScript | clearTimeout() & clearInterval() Method

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.
filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<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>

chevron_right



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.
filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<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>

chevron_right



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



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ShivaPrakash7



Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.