Skip to content
Related Articles
Open in App
Not now

Related Articles

JavaScript clearTimeout() & clearInterval() Method

Improve Article
Save Article
  • Last Updated : 05 Dec, 2022
Improve Article
Save Article

Prerequisite: setTimeout() and setInterval() 

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

Syntax:

clearTimeout(name_of_setTimeout)

Parameters: The clearTimeOut() function takes a single parameter.

  • name_of_setTimeout: It is the name of the setTimeOut() function whose timeout is to be cleared.

Example: In this example, we will write a function to clear the timeout set by the setTimeout() function using the clearTimeout() function.

HTML




<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, 2000);
      
    }
      
    function stop() {
        clearTimeout(t);
    }
</script>


Output: The GeeksForGeeks button color changes after 2 seconds just one time. Click on Stop 2 seconds after clicking the GeeksForGeeks button to clear Timeout. 

 

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

Syntax:

clearInterval(nameOfInterval)

Parameters: The clearInterval() function takes a single parameter.

  • nameOfInterval: It is the name of the setInterval() function whose interval is to be cleared.

Example: In this example, we will write a function to clear the interval set by the setInterval() function using the clearInterval() function.

HTML




<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, 1000);
      
    }
      
    function stop() {
        clearInterval(t);
    }
</script>


Output: In this example, the GeeksForGeeks color changes and stays the same every second, 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

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!