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

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

setTimeout method (window)

Browser support:

Starts a timer that executes a piece of code after the specified number of milliseconds have elapsed.

This method is useful if you want to execute an action after some delay. If an action needs to be executed repeatedly, use the setInterval method.

Syntax:

object.setTimeout (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 after some delay.

delay

Required. Integer that specifies the delay, 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 clearTimeout method to cancel the timer.

Example HTML code 1:

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

<head>
    <script type="text/javascript">
        var timerID = null;
        function DelayedAlert () {
            if (timerID === null) { // to avoid multiple registration
                timerID = setTimeout ("DisplayAlert ()", 3000);
                EnableCancelButton (true);
            }
        }

        function DisplayAlert () {
            alert ("The 3 seconds has been elapsed!");
            CancelTimer ();
        }
        
        function CancelTimer () {
            clearTimeout (timerID);
            timerID = null;
            EnableCancelButton (false);
        }

        function EnableCancelButton (enable) {
            var cancelButton = document.getElementById ("cancelTimer");
            cancelButton.disabled = !enable;
        }
    </script>
</head>
<body>
    <button onclick="DelayedAlert ();">Alert me after 3 seconds!</button>
    <button id="cancelTimer" onclick="CancelTimer ();" disabled="disabled">Don't alert</button>
</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 setTimeout method:

<head>
    <script type="text/javascript">
        var timerID = null;
        function DelayedAlert () {
            if (timerID === null) { // to avoid multiple registration
                timerID = setTimeout (DisplayAlert, 3000);
                EnableCancelButton (true);
            }
        }

        function DisplayAlert () {
            alert ("The 3 seconds has been elapsed!");
            CancelTimer ();
        }
        
        function CancelTimer () {
            clearTimeout (timerID);
            timerID = null;
            EnableCancelButton (false);
        }

        function EnableCancelButton (enable) {
            var cancelButton = document.getElementById ("cancelTimer");
            cancelButton.disabled = !enable;
        }
    </script>
</head>
<body>
    <button onclick="DelayedAlert ();">Alert me after 3 seconds!</button>
    <button id="cancelTimer" onclick="CancelTimer ();" disabled="disabled">Don't alert</button>
</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 timerID = null;
        function DelayedAlert () {
            if (timerID === null) { // to avoid multiple registration
                    // use the "JavaScript" value for the first additional parameter because of Internet Explorer
                timerID = setTimeout (DisplayAlert, 3000, "JavaScript", "first parameter", "second parameter");
                EnableCancelButton (true);
            }
        }

        function DisplayAlert (param0, param1, param2) {
            if (param0) {   // Firefox, Opera, Google Chrome and Safari
                alert ("The 3 seconds has been elapsed!");
                alert ("Parameters: " + param0 + ", " + param1 + ", " + param2);
            }
            else {
                alert ("The 3 seconds has been elapsed!");
            }
            CancelTimer ();
        }
        
        function CancelTimer () {
            clearTimeout (timerID);
            timerID = null;
            EnableCancelButton (false);
        }

        function EnableCancelButton (enable) {
            var cancelButton = document.getElementById ("cancelTimer");
            cancelButton.disabled = !enable;
        }
    </script>
</head>
<body>
    <button onclick="DelayedAlert ();">Alert me after 3 seconds!</button>
    <button id="cancelTimer" onclick="CancelTimer ();" disabled="disabled">Don't alert</button>
</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">
        function DelayedColorChange (elem, colorTo, delay) {
            setTimeout (function () {ChangeColor (elem, colorTo)}, delay * 1000);
        }

        function ChangeColor (elem, colorTo) {
            elem.style.color = colorTo;
        }
        
    </script>
</head>
<body>
    <button onclick="DelayedColorChange (this, '#ff0000', 1);">Change my text color to red after 1 second!</button>
    <button onclick="DelayedColorChange (this, '#0000ff', 2);">Change my text color to blue after 2 seconds!</button>
</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">
            // ColorChanger object
        function ColorChanger (elem, colorTo, delay) {
            this.Init (elem, colorTo, delay);
        }

        ColorChanger.prototype.Init = function (elem, colorTo, delay) {
            this.elem = elem;
            this.colorTo = colorTo;
            this.delay = delay;

                // 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 ColorChanger) */
            this.elem.onclick = function () {_this.DelayedColorChange ()};
        }

        ColorChanger.prototype.DelayedColorChange = function () {
                // 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 ColorChanger) */
            setTimeout (function () {_this.ChangeColor ()}, this.delay * 1000);
        }

        ColorChanger.prototype.ChangeColor = function () {
            this.elem.style.color = this.colorTo;
        }
        

            // Attach ColorChanger instances to the buttons
        function OnDocLoad () {
            var button1 = document.getElementById ("button1");
            var button2 = document.getElementById ("button2");

            var colorChanger1 = new ColorChanger (button1, "#ff0000", 1);
            var colorChanger2 = new ColorChanger (button2, "#0000ff", 2);
        }
    </script>
</head>
<body onload="OnDocLoad ()">
    <button id="button1">Change my text color to red after 1 second!</button>
    <button id="button2">Change my text color to blue after 2 seconds!</button>
</body>