JavaScript Timing Events
| 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12 | JavaScript executes code after a set interval, which we call timing events |
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 these timing events.
Using timing events in JavaScript is straightforward; two key methods are:
setInterval() - Executes a specified code repeatedly at every given milliseconds.
setTimeout() - Executes specified code once after the given milliseconds.
Note: setInterval() and setTimeout() are two methods of the HTML DOM Window object.
setInterval() Method
The setInterval() method executes a specified code repeatedly at every given milliseconds.
Syntax
The window.setInterval() method can be used without the window prefix, directly as setInterval().
The first parameter of setInterval() is the function (function).
The second parameter is the interval in milliseconds.
Note: 1000 milliseconds equals one second.
Example
Display "Hello" every three seconds:
setInterval(function(){alert("Hello")},3000);
The example demonstrates how to use the setInterval() method, but popping up 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, like a clock.
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;
}
How to Stop Execution?
The clearInterval() method is used to stop the function code executed by the setInterval() method.
Syntax
The window.clearInterval() method can be used without the window prefix, directly as clearInterval().
To use the clearInterval() method, you must use a global variable when creating the timing method:
Then you can use the clearInterval() method to stop the execution.
Example
The following example adds 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>
setTimeout() Method
Syntax
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 specify it using this variable name.
The first parameter of setTimeout() is a string containing the JavaScript statement. This statement could be something like "alert('5 seconds!')", or a function call, like alertMsg.
The second parameter indicates how many milliseconds from now to execute the first parameter.
Example
Wait for 3 seconds, then pop up "Hello":
setTimeout(function(){alert("Hello")},3000);
How to Stop Execution?
The clearTimeout() method is used to stop the function code executed by the setTimeout() method.
Syntax
The window.clearTimeout() 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):
If the function has not yet been executed, you can use the clearTimeout() method to stop the function code.
Example
Here is the same example, but with a "Stop the alert" button:
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}