JavaScript Timing Events


JavaScript executes code after a set time interval, we call this a timing event.


JavaScript timing events

By using JavaScript, we have the ability to execute code after a set interval, rather than immediately after a function is called. We call this a timing event.

It is easy to use timing events in JavaScritp, and there are two key ways to do this:

  • setInterval() - Executes the specified code non-stop at a specified number of milliseconds.

  • setTimeout() - Executes the specified code after the specified number of milliseconds.

Note: setInterval() and setTimeout() are two methods of html DOM Window objects.


setInterval() method

setInterval() executes the specified code non-stop for the specified number of milliseconds

Grammar

window.setInterval("javascript function",milliseconds);

window.setInterval() method can use the function setInterval() without the window prefix.

setInterval() The first argument is the function.

The number of milliseconds for the interval between the second parameter

Note: 1000 milliseconds is one second.

Example

"hello" pops up every three seconds:

setInterval(function(){alert("Hello")},3000);

Try It! 

The example shows how to use the setInterval() method, but popping up every three seconds is not good for the user experience.

The following example displays the current time. The setInterval() method is set to execute code every second, just like a watch.

Example

displays the current time

var myVar=setInterval(function(){myTimer()},1000);
 
function myTimer()
{
     var d=new Date();
     var t=d.toLocaleTimeString();
     document.getElementById("demo").innerHTML=t;
}

Try It! 


How do I stop execution?

The clearInterval() method is used to stop the function code of the setInterval() method from executing.

Grammar

window.clearInterval(intervalVariable)

window.clearInterval() method can use the function clearInterval() without the window prefix.

To use the clearInterval() method, you must use global variables when creating the timing method:

myVar=setInterval("javascript function",milliseconds);

You can then use the clearInterval() method to stop execution.

Example

in the following example, we added a stop button:

<p id="demo"></p>
<button onclick="myStopFunction()">Stop</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
     var d=new Date();
     var t=d.toLocaleTimeString();
     document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
     clearInterval(myVar);
}
</script>

 Try It! 


setTimeout() method

Grammar

myVar= window.setTimeout("javascript function", milliseconds);

The setTimeout() method returns a value. In the above statement, the value is stored in a variable named myVar. If you want to cancel this setTimeout(), you can use this variable name to specify it.

The first argument to setTimeout() is a string containing a JavaScript statement. This statement may be such as "alert('5 seconds!')", or a call to a function, such as alertMsg.

The second parameter indicates how many milliseconds from the current one is executed.

Tip: 1000 milliseconds equals one second.

Example

Wait 3 seconds and then pop up "Hello":

setTimeout(function(){alert("Hello")},3000);

Try It! 


How do I stop execution?

The clearTimeout() method is used to stop the execution of the function code of the setTimeout() method.

Grammar

window.clearTimeout(timeoutVariable)

The window.clearTimeout() method can be used without the window prefix.

To use the clearTimeout() method, you must use a global variable in the create timeout method (setTimeout):

myVar=setTimeout("javascript function",milliseconds);

If the function has not been executed, you can use the clearTimeout() method to stop executing the function code.

Example

Here's the same example, but with the added "Stop the alert" button:
var myVar;
 
function myFunction()
{
     myVar=setTimeout(function(){alert("Hello")},3000);
}
 
function myStopFunction()
{
     clearTimeout(myVar);
}

Try It! 


Examples

More Examples

Another simple timekeeping