How To Use Window ClearInterval Method In JavaScript

Posted By Bajarangi soft , Posted On 30-09-2020

In Java Script we can use ClearInterval () method to stop current time. so today we are going to discuss how to used ClearInterval () method with java script.

How To Use Window ClearInterval Method In JavaScript

The clearInterval() method clears a timer set with the setInterval() method.

The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
Note: To be able to use the clearInterval() method, you must use a variable when creating the interval method:

myVar = setInterval("javascript function", milliseconds);

Then you will be able to stop the execution by calling the clearInterval() method.

clearInterval(myVar);

Syntax and Usage

clearInterval(var)

Parameter Values

Parameter   Description
var            Required. The name of the timer returned by the setInterval() method

Example(1)

<h2 id="demo"></h2>

<button class="btn btn-info" onclick="myStopFunction()">Stop time</button>

<script>
    var myVar = setInterval(myTimer, 1000);

    function myTimer() {
        var d = new Date();
        var t = d.toLocaleTimeString();
        document.getElementById("demo").innerHTML = t;
    }

    function myStopFunction() {
        clearInterval(myVar);
    }
</script>

In above example starts the clock when you click it will stop current time.

Example(2)

<button class="btn btn-info" onclick="move()">Click Me</button>
<div id="myProgress">
    <div id="myBar"></div>
</div>
<script>
    function move() {
        var elem = document.getElementById("myBar");
        var width = 0;
        var id = setInterval(frame, 10);
        function frame() {
            if (width == 100) {
                clearInterval(id);
            } else {
                width++;
                elem.style.width = width + '%';
            }
        }
    }
</script>

In above example when you click button it will start progress bar.

Example(3)

<button class="btn btn-primary" onclick="stopColor()">Stop Toggling</button>

<script>
    var myVar = setInterval(setColor, 300);

    function setColor() {
        var x = document.body;
        x.style.backgroundColor = x.style.backgroundColor == "green" ? "pink" : "green";
    }

    function stopColor() {
        clearInterval(myVar);
    }
</script>

In above example the setInterval() method executes the setColor() function once every 300 milliseconds, which will toggle between two background colors.

Complete Code For Window ClearInterval Method In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>How To Use Window ClearInterval Method In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1 {
        color: red;

    }
    #myProgress {
        width: 100%;
        height: 30px;
        position: relative;
        background-color: #ddd;
    }

    #myBar {
        background-color: #4CAF50;
        width: 10px;
        height: 30px;
        position: absolute;
    }
</style>

<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1>Use Window ClearInterval Method In JavaScript</h1>
    </div>
    <br>
   <div class="well">
       <button class="btn btn-info" onclick="myStopFunction()">Stop time</button>


       <h2 id="demo1"></h2>
       <button class="btn btn-info" onclick="move()">Click Me</button>
       <br><br><br>
       <div id="myProgress">
           <div id="myBar"></div>
       </div>
   </div>
</body>
</html>
<button class="btn btn-info" onclick="move()">Click Me</button>
<br><br><br>
<div id="myProgress">
    <div id="myBar"></div>
</div>
<script>
    var myVar = setInterval(myTimer, 1000);

    function myTimer() {
        var d = new Date();
        var t = d.toLocaleTimeString();
        document.getElementById("demo1").innerHTML = t;
    }

    function myStopFunction() {
        clearInterval(myVar);
    }

    function move() {
        var elem = document.getElementById("myBar");
        var width = 0;
        var id = setInterval(frame, 10);
        function frame() {
            if (width == 100) {
                clearInterval(id);
            } else {
                width++;
                elem.style.width = width + '%';
            }
        }
    }
</script>

Related Post