In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > setInterval (window)

setInterval method (window)

Browser support:

Starts a timer that periodically repeats the execution of the specified expression.

This method is useful if you want to execute an action again and again, for example in case of animations. If an action needs to be executed only once and after some delay, use the setTimeout method.

Syntax:

object.setInterval (functionOrCode, delay [, language] | [, param1 [, param2 [, ...]]]);

You can find the related objects in the Supported by objects section below.

Parameters:

functionOrCode

Required. Reference to a function or a string that specifies the code to be executed repeatedly.

delay

Required. Integer that specifies the elapsed time between two executions, in milliseconds.

language

Optional. String that specifies the language of the expression specified by the functionOrCode parameter. This parameter is case-insensitive and supported by Internet Explorer only.

The following languages are supported:

JavaScript

The language is JavaScript.

JavaScript1.1

The language is JavaScript 1.1.

JavaScript1.2

The language is JavaScript 1.2.

JavaScript1.3

The language is JavaScript 1.3.

JScript

Default. The language is Microsoft JScript.

VBS

Same as VBScript.

VBScript

The language is Microsoft Visual Basic Scripting Edition.

param1, param2, ...

Optional. In Firefox, Opera, Google Chrome and Safari, if the functionOrCode parameter refers to a function, then the values specified after the delay parameter will be passed to the function. See Example 3 for details.

Return value:

Integer that retrieves the identifier of the registered timer. Use this value for the clearInterval method to cancel the timer.

Example HTML code 1:

This example illustrates the use of the setInterval method when a code snippet is specified for the functionOrCode parameter:

<head>
    <script type="text/javascript">
        var number = 0;
        var timerID = null;
        function StartCounter () {
            if (timerID === null) { // to avoid multiple registration
                timerID = setInterval ("DisplayNumber ()", 200);
            }
        }
        function DisplayNumber () {
            if (number > 9) {
                clearInterval (timerID);
                return;
            }
            document.getElementById ("output").innerHTML += number;
            number++;
        }
    </script>
</head>
<body>
    <button onclick="StartCounter ();">Click to count!</button>
    <textarea id="output"></textarea>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is the same as the previous one, but it passes a function as the functionOrCode parameter for the setInterval method:

<head>
    <script type="text/javascript">
        var number = 0;
        var timerID = null;
        function StartCounter () {
            if (timerID === null) { // to avoid multiple registration
                timerID = setInterval (DisplayNumber, 200);
            }
        }
        function DisplayNumber () {
            if (number > 9) {
                clearInterval (timerID);
                return;
            }
            document.getElementById ("output").innerHTML += number;
            number++;
        }
    </script>
</head>
<body>
    <button onclick="StartCounter ();">Click to count!</button>
    <textarea id="output"></textarea>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example passes parameters to the registered method in Firefox, Opera, Google Chrome and Safari:

<head>
    <script type="text/javascript">
        var number = 0;
        var timerID = null;
        function StartCounter () {
            if (timerID === null) { // to avoid multiple registration
                    // use the "JavaScript" value for the first additional parameter because of Internet Explorer
                timerID = setInterval (DisplayNumber, 200, "JavaScript", "first parameter", "second parameter");
            }
        }
        function DisplayNumber (param0, param1, param2) {
            if (number > 9) {
                clearInterval (timerID);
                return;
            }
            document.getElementById ("output").innerHTML += number;
            number++;

                // the parameters are undefined in Internet Explorer
            var paramsDiv = document.getElementById ("params");
            paramsDiv.innerHTML = param0 + "<br />" + param1 + "<br />" + param2;
        }
    </script>
</head>
<body>
    <button onclick="StartCounter ();">Click to count!</button>
    <textarea id="output"></textarea>
    <br /><br />
    Parameters passed to the DisplayNumber method:
    <div id="params" style="background-color:#a0e0b0;"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example shows how to pass parameters to the registered method in all commonly used browsers:

<head>
    <script type="text/javascript">
        var number = 0;
        var timerID = null;
        function StartCounter () {
            if (timerID === null) { // to avoid multiple registration
                var outputElem = document.getElementById ("output");
                timerID = setInterval (function () {DisplayNumber (outputElem)}, 200);
            }
        }
        function DisplayNumber (outputElem) {
            if (number > 9) {
                clearInterval (timerID);
                return;
            }
            outputElem.innerHTML += number;
            number++;
        }
    </script>
</head>
<body>
    <button onclick="StartCounter ();">Click to count!</button>
    <textarea id="output"></textarea>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 5:

This example is similar to the previous one, but it shows how to register object methods as event handlers:

<head>
    <script type="text/javascript">
            // DisplayNumbers object
        function DisplayNumbers (elem, from, to, delay) {
            this.Init (elem, from, to, delay);
        }

        DisplayNumbers.prototype.Init = function (elem, from, to, delay) {
            this.elem = elem;
            this.from = from;
            this.to = to;
            this.delay = delay;

            this.act = this.from;

                // save a reference to the current object
            var _this = this;
                /* use the saved reference within the registered function 
                 (the 'this' statement within the registered function refers to the function
                 not the current instance of DisplayNumbers) */
            this.timerID = setInterval (function () {_this.Next ()}, this.delay);
        }

        DisplayNumbers.prototype.Next = function () {
            if (this.act > this.to) {
                clearInterval (this.timerID);
                return;
            }

            this.elem.innerHTML += this.act;
            this.act++;
        }

            // Attach DisplayNumbers instances to textareas
        function OnDocLoad () {
            var output1 = document.getElementById ("output1");
            var output2 = document.getElementById ("output2");

            var displayNumbers1 = new DisplayNumbers (output1, 1, 9, 400);
            var displayNumbers2 = new DisplayNumbers (output2, -9, 9, 200);
        }
    </script>
</head>
<body onload="OnDocLoad ()">
    <textarea id="output1"></textarea>
    <textarea id="output2"></textarea>
</body>