JavaScript Timing Event
JavaScript can be executed by time interval. This is called timing events. window object allows to execute code specified intervals. The time interval is called a timed event. Two key method for use with JavaScript are:
setTimeout(function, milliseconds）
A function execution after the specified number of milliseconds.
setInterval(function, milliseconds）
And setTimeout () the same, but the function is repeatedly executed continuously.
setTimeout () and setInterval () is the HTML DOM Window object.
setTimeout () method
// syntax: window.setTimeout(function, milliseconds);
window.setTimeout () method can be written without the window prefix circumstances.
The first parameter is the function to be performed. The second parameter indicates the number of milliseconds before execution.
Click the button. Wait 3 seconds, the page will be prompted to "Hello":
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>How to stop the execution setTimeout?
the clearTimeout () method to stop execution setTimeout () function specified.
window.clearTimeout(timeoutVariable)
window.clearTimeout () can be prepared by the method in the case where there is no window prefix.
the clearTimeout () method uses the variable () returned from the setTimeout:
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);If the function has not been performed, you can stop the execution by calling clearTimeout () method:
With the same example above, but add a "stop" button:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>setInterval () method
setInterval () method is repeated given function at each given time interval.
window.setInterval(function, milliseconds);
the window.setInterval () can be prepared by the method in the case where there is no window prefix.
The first parameter is the function to be performed.
The second parameter indicates the length of time between each execution interval.
This example performs a function named "myTimer" (e.g., digital watches) per second.
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}How to stop the execution setInterval?
the clearInterval () method to stop execution setInterval () function specified in the method.
window.clearInterval(timerVariable)
window.clearInterval () can be prepared by the method in the case where there is no window prefix.
the clearInterval () method uses the variable () following return from setInterval:
myVar = setInterval(function, milliseconds);
clearInterval(myVar);With the same example above, but we've added a "Stop Time" button:
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>