JavaScript Timing Events

Friday, January 30, 2009 by ASP.NET AJAX Team | Comments 0

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.

Add comment

  1. Formatting options
       
     
     
     
     
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)