JavaScript Timing Events

1
2
3
4
5
6
7
8
9
10
11
12

JavaScript Execute Code after a Set Time Interval

We call it a timing event

JavaScript Timing Events

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

Using timing events in JavaScript is very easy; the two key methods are:

  • setInterval() - Executes the specified code continuously at specified millisecond intervals.
  • setTimeout() - Executes the specified code after a specified number of milliseconds.

Note:setInterval() and setTimeout() are two methods of the HTML DOM Window object.

setInterval() Method

setInterval() continuously executes the specified code at specified millisecond intervals

Syntax

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

window.setInterval()The method can be used without the window prefix, directly using the functionsetInterval()。

The first parameter of setInterval() is a function.

The second parameter is the interval in milliseconds

Note:1000 milliseconds equals one second.

Example

Pop up "hello" every three seconds:

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

Try it Yourself »

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

The following example will display the current time. The setInterval() method sets the code to execute every second, just like a watch.

Example

Display 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 Yourself »

How to Stop Execution?

The clearInterval() method is used to stop the function code executed by the setInterval() method.

Syntax

window.clearInterval(intervalVariable)

window.clearInterval()The method can be used without the window prefix, directly using the functionclearInterval()。

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

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

Then you can use the clearInterval() method to stop the 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 Yourself »

setTimeout() Method

Syntax

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

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

The first parameter of setTimeout() is a string containing JavaScript statements. This statement might be something like "alert('5 seconds!')", or a call to a function, such as alertMsg.

The second parameter indicates how many milliseconds from now the first parameter will be executed.

Tip:1000 milliseconds equals one second.

Example

Wait 3 seconds, then pop up "Hello":

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

Try it Yourself »

How to Stop Execution?

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

Syntax

window.clearTimeout(timeoutVariable)

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

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

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

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

Example

Below is the same example, but with a "Stop the alert" button added:

var myVar; function myFunction() { myVar=setTimeout(function(){alert("Hello")},3000); } function myStopFunction() { clearTimeout(myVar); }

Try it Yourself »

Examples

More Examples

Another simple timer

Other Extensions