This article is taken from W3Schools.

 

With JavaScript, it is possible to execute some code NOT immediately after a function is called, but after a specified time interval. This is called timing events.

It's very easy to time events in JavaScript. The two key methods that are used are:

  • setTimeout() - executes a code some time in the future
  • clearTimeout() - cancels the setTimeout()

setTimeout()
Syntax

var t=setTimeout("javascript statement",milliseconds); 

The setTimeout() method returns a value - In the statement above, the value is stored in a variable called t. If you want to cancel this setTimeout(), you can refer to it using the variable name.

The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".

The second parameter indicates how many milliseconds from now you want to execute the first parameter.

Note: There are 1000 milliseconds in one second.

Example:
When the button is clicked in the example below, an alert box will be displayed after 5 seconds.

<html> 
<head> 
 
    <script type="text/javascript">  
    function timedMsg()  
    {  
        var t=setTimeout("alert('5 seconds!')",5000);  
    }  
    </script> 
 
</head> 
<body> 
    <form> 
        <input type="button" value="Display timed alertbox!" onclick="timedMsg()">  
    </form> 
</body> 
</html> 

 

Example - Infinite Loop

To get a timer to work in an infinite loop, we must write a function that calls itself. In the example below, when the button is clicked, the input field will start to count (forever), starting at 0:

<html> 
<head> 
    <script type="text/javascript">  
    var c=0 
    var t  
    function timedCount()  
    {  
        document.getElementById('txt').value=c;  
        c=c+1;  
        t=setTimeout("timedCount()",1000);  
    }  
    </script> 
</head> 
<body> 
    <form> 
        <input type="button" value="Start count!" onclick="timedCount()">  
        <input type="text" id="txt">  
    </form> 
</body> 
</html> 

 

 

clearTimeout()
Syntax

clearTimeout(setTimeout_variable) 

 

Example
The example below is the same as the "Infinite Loop" example above. The only difference is that we have now added a "Stop Count!" button that stops the timer:

<html> 
<head> 
 
    <script type="text/javascript">  
    var c=0 
    var t  
    function timedCount()  
    {  
        document.getElementById('txt').value=c;  
        cc=c+1;  
        t=setTimeout("timedCount()",1000);  
    }  
 
    function stopCount()  
    {  
        clearTimeout(t);  
    }  
    </script> 
 
</head> 
<body> 
    <form> 
        <input type="button" value="Start count!" onclick="timedCount()">  
        <input type="text" id="txt">  
        <input type="button" value="Stop count!" onclick="stopCount()">  
    </form> 
</body> 
</html> 

 

Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM Window object.


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts

Comments

Comments are disabled in preview mode.