Repeating timers with setInterval() method

The setInterval() method is a timing event that executes a method after specified time given in milliseconds, repeatedly. That is, if the timer is set to 3 seconds, the function is executed at every 3 seconds. The setInterval() is timing event defined in HTML DOM Window object.

Syntax for setInterval()

var mytime = window.setInterval(“javascriptFunction”, “time in milliseconds”);

The setInterval() method can be cleared using clearInterval() method.This method stops the execution of setInterval() method.

Syntax for clearInterval()

window.clearInterval(mytime);

Advantage of using setInterval()

The setInterval() method is useful when a method has to be executed repeatedly.

Disadventage of using setInterval()

The setInterval() method associated with the setInterval() is called regularly when the time elapsed. But if there is another execution going on, the delay associated with calling the setInterval() function lasts longer than specified value and unwanted results may occur.

The example below shows a counter which displays incremented number every 1 second.

Example with setInterval() time based counter

<!DOCTYPE html>
<html>

<head>
  	<style>
        input{width:10%;background-color:#ccc;border:none;font-weight:bold;color:#555;text-align:center;}
        p{font-family:Arial;font-size:0.7em;color:#999;}  
    </style>
    <script>
        //Counter increments every 1s.
        var counter = setInterval(function(){startCount()},1000);
        //Counter starts from 1.
        var initVal = 1;
        function startCount(){
            //Counter value is displayed in text box.
            var count = document.getElementById('txtBox');
            count.value = initVal++;
        }			
    </script>
</head>

<body>
    <input type="text" id="txtBox">
    <br/>
    <button onclick = "clearInterval(counter)">Stop Counter</button>		
    <button onclick="startCount()">Start Counter</button>
    <p>Notice that after re-starting the counter, the 1sec base is gone? That happens
    because <b>clearTimeout</b> cleared all references to the timer.</p>
</body>

</html>

›› go to examples ››

Repeating timers with setInterval() method

Syntax for setInterval()

Syntax for clearInterval()

Advantage of using setInterval()

Disadventage of using setInterval()

Example with setInterval() time based counter

Comments

About

Contact

Get Connected