clearInterval in JavaScript

How to clear the set time in JavaScript?

clearInterval() in JavaScript

clearInterval in JavaScript is an native function, which is used to clear a timer set with the setInterval() method. The parameter of clearInterval() method is the ID value returned by the setInterval() method.

NOTE: We must use setInterval() method before using clearInterval() method in the script code.

Stop the current run time with the clearInterval() method.

<p>Click the below button to stop the current run time.</p>
<p id="myId"></p>
<input type="button" value="Stop" onclick="myStoptime()"/>

<script>
    var myTime = setInterval(function () { myRuntime() }, 1000);

    function myRuntime() {
        var a = new Date();
        var b = a.toLocaleTimeString();
        document.getElementById("myId").innerHTML = b;
    }

    function myStoptime() {
        clearInterval(myTime);
    }
</script>

In the above code, we set the current run timer with the setInterval() function {myRuntime()} and we are stopping the run time with the clearInterval() function. Onclick of the button "Stop" stops the current run time.

OUTPUT

Stop changing the background-color.

<p>Click the button to stop changing the background color color.</p>
<input type="button" value="Stop" onclick="fixColor()"/>

<script>
    var a = setInterval(function () { myColor() }, 500);

    function myColor() {
        var b = document.body;
        b.style.backgroundColor = b.style.backgroundColor == "lightgreen" ? "lightblue" : "lightgreen";
    }

    function fixColor() {
        clearInterval(a);
    }
</script>

Stop background color change

We are changing the background-color for every half second with the setInterval() method, and we stop the changing background-color with the clearInterval() method. Click here to see the output of the above code snippet.

Dynamic progress bar using setInterval() and clearInterval().

<style>
        #myId{
        border:8px solid #0e0208;
        height:5px;
        width:90%;
        position:relative;
        background-color:yellow;
        }

        #myDemo {
        background-color:blue;
        height:100%;
        position:absolute;
        width:15px;
        }
</style>

<div id="myId">
<div id="myDemo"></div>
</div>
<br />
<br />
<br />
<input type="button" value="Start" onclick="myFunction()"/>


<script>
    function myFunction() {
        var a = document.getElementById("myDemo");
        var width = 0;
        var c = setInterval(Slide, 500);
        function Slide() {
            if (width == 150) {
                clearInterval(c);
            } else {
                width++;
                a.style.width = width + '%';
            }
        }
    }
</script>

Dynamic progress bar

We create a dynamic progress bar with the help of setInterval() function and clearInterval() function.

OUTPUT