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 this a timing event.
It is very easy to use timing events in JavaScript. The two key methods are:
setInterval() - Execute the specified code continuously for the specified number of milliseconds.
setTimeout() - Execute the specified code after pausing for the specified number of milliseconds
Note: setInterval() and setTimeout() are two methods of the HTML DOM Window object.
setInterval() method
setInterval() executes the specified code continuously for the specified number of milliseconds
Syntax
window.setInterval("javascript function",milliseconds);
window.setInterval() method can use the function setInterval() directly without using the window prefix.
setInterval() The first parameter is the function.
The number of milliseconds between the second parameter
Note: 1000 milliseconds is one second.
"hello" pops up every three seconds:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setInterval(function(){alert("Hello")},3000);
}
</script>
</body>
</html>How to stop execution?
The clearInterval() method is used to stop the function code of the setInterval() method execution.
Syntax
window.clearInterval(intervalVariable)
window.clearInterval() method can use the function clearInterval() directly without using the window prefix.
To use the clearInterval() method, you must use global variables when creating the timing method:
myVar=setInterval("javascript function",milliseconds);
Then you can use the clearInterval() method to stop execution.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
var t = self.setInterval("clock()",50)
function clock()
{
var time=new Date()
document.getElementById("clock_show").innerHTML=time
}
</script>
</head>
<body>
<p id="clock_show"></p>
<button onclick="window.clearInterval(t)">停止计时</button>
</body>
</html>setTimeout() method
Syntax
window.setTimeout("javascript function", milliseconds);
The setTimeout() method will return a certain value. In the above statement, the value is stored in a variable named t. If you wish to cancel this setTimeout(), you can specify it using this variable name.
The first parameter of setTimeout() is a string containing JavaScript statements. 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 time the first parameter will be executed.
Tip: 1000 milliseconds is equal to one second.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>How to stop execution?
The clearTimeout() method is used to stop the execution of the setTimeout() method function code
.
Syntax
window.clearTimeout(timeoutVariable)
The window.clearTimeout() method can not use the window prefix
To use the clearTimeout() method, you must. Use global variables in creating a timeout method (setTimeout):
myVar=setTimeout("javascript function",milliseconds);
If the function has not been executed yet, you can use the clearTimeout() method. Stop executing function code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
var s = 0;
var n = 0;
var t;
function timeCount()
{
document.getElementById('second_show').value = s;
n = n+1;
s = n/10;
t = setTimeout("timeCount()",100);
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时" onClick="timeCount()">
<input type="text" id="second_show">
<input type="button" value="结束计时" onClick="clearTimeout(t)">
</form>
</body>
</html>
.
Next Section