Javascript intervals and timeouts

JavaScript code executes synchronously, in single thread. When a delay or time interval ha to be introduced to code execution they use HTML DOM window object methods explained below.

setInterval() method

The setInterval() method executes the function passed to it, at a specified time intervals repeatedly.

Syntax

window.setInterval(function, time);

The syntax can also be written without the window object prefix. The function is a JavaScript function to be executed. The time argument is a length of time intervals between each execution of the function. It is given in milliseconds.

Disadvantages of setInterval() method

In JavaScript, this method queues up for execution when timeout occurs. If there is a long callback function or another event executing, and timeout has occurred for firing the function in setInterval again, browser drops (prevents) the second execution. Because, if it queues up all setInterval callbacks, there would be bunch of same function executing back to back. So major disadvantage of this method is, it does not care what browser is currently executing and queues up indiscriminately even if it means that callback function is dropped the from execution cue.

clearInterval() method

The clearInterval() method stops the further execution of the function passed in setInterval(). The setInterval() must be assigned to a global variable while creating. The global variable can be passed to clearInterval() to stop its execution.

Syntax

global_variable = setInterval(func, time);

window.clearInterval(global_variable);

The syntax can also be written without the window object prefix.

Example of a setting and clearing JavaScript interval

<!DOCTYPE html>
<html>

<head>
<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/><br/>
    <button onclick="startCount()">Start Counter</button>
    <button onclick = "clearInterval(counter)">Stop Counter</button>
    <p>Buttons to start and stop counter. clearInterval() stops counter.</p>
</body>

</html>

setTimeout() method

The setTimeout() method waits for specified number of milliseconds and executes the function passed as parameter.

Syntax

window.setTimeout(“function”, time);

The syntax can also be written without the window object prefix. The function is a JavaScript function to be executed. The time is a length of time intervals after which function has to be executed. It is given in milliseconds.

Disadvantages of setTimeout() method

This method updates the screen when time is expired and does not consider the load on browser or if the webpage is at the background with some other activity in foreground, or if an animation which has to be displayed is scrolled off from user’s view. Such activities bring extra load on browser or computer to juggle the process, irrespective of the function being used by user or not.

clearTimeout() method

The clearTimeout() method is used to stop execution of the function in setTimeout(). The setTimeout() must be assigned to a global variable while creating. The global variable can be passed to clearTimeout() to stop its execution.

Syntax

global_variable = setTimeout(func, time);

window.clearTimeout(global_variable);

The syntax can also be written without the window object prefix.

Example of a setting and clearing JavaScript timeout timer

<!DOCTYPE html>
<html>

<head>
<script>
    function setPwdFunc(){
        setPwd = setTimeout(function(){alert("5 seconds time-out. Re-enter password")}, 5000);
    }			
</script>
</head>

<body>
    <p>Enter password in 5 seconds. To stop timer press clear.</p>
    <input type="password" id="pwd" onclick = "setPwdFunc()" />	
    <button onclick="clearInterval(setPwd)">Clear</button>
</body>

</html>

NOTE: Methods setImmediate() and requestAnimationFrame() have been introduced to overcome the disadvantages of above functions. However they are not uniformly supported by all browsers and are in it’s initial stages. Hence it is excluded from this tutorial as of now.

›› go to examples ››

Javascript intervals and timeouts

setInterval() method

Syntax

Disadvantages of setInterval() method

clearInterval() method

Syntax

Example of a setting and clearing JavaScript interval

setTimeout() method

Syntax

Disadvantages of setTimeout() method

clearTimeout() method

Syntax

Example of a setting and clearing JavaScript timeout timer

Comments

About

Contact

Get Connected