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 event continuously for the specified number of milliseconds. code.
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() The method does not need to use the window prefix , use function setInterval() directly.
setInterval() The first parameter is the function.
The number of milliseconds between the second parameter
Note: 1000 milliseconds is one second.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>单击按钮每3秒出现一个“Hello”警告框。</p>
<p>再次点击警告框，经过3秒出现新的警告框，这将一直执行 ...</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setInterval(function(){alert("Hello")},3000);
}
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
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 will display the current time. The setInterval() method sets the code to be executed every second, just like a watch.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>在页面显示一个时钟</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
How to stop execution?
The clearInterval() method is used to stop the function code of the setInterval() method execution.
grammar
window.clearInterval() The method can use the function directly without using the window prefix clearInterval().
To use the clearInterval() method, you must use global variables when creating the timing method:
Then you can use the clearInterval() method to stop execution.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>页面上显示时钟：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止时钟</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>
</body>
</html>Run instance »
Click the "Run instance" button to view the online instance
setTimeout() method
Syntax
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 equals one second.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>Run Instance»
Click "Run instance" button to view the online instance
How to stop execution?
The clearTimeout() method is used to stop the execution of the function code of the setTimeout() method
#. ##Syntaxwindow.clearTimeout() The method does not need to use the window prefix .
To use the clearTimeout() method, you must use a global variable in the creation timeout method (setTimeout): ##myVar=setTimeout("<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
<button onclick="myFunction()">点我</button>
<button onclick="myStopFunction()">停止弹框</button>
<script>
var myVar;
function myFunction(){
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
clearTimeout(myVar);
}
</script>
</body>
</html>
Run Instance»Click the "Run Instance" button to view the online instance
Another simple timing
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function timedText(){
var x=document.getElementById('txt');
var t1=setTimeout(function(){x.value="2 seconds"},2000);
var t2=setTimeout(function(){x.value="4 seconds"},4000);
var t3=setTimeout(function(){x.value="6 seconds"},6000);
}
</script>
</head>
<body>
<form>
<input type="button" value="显示文本时间!" onclick="timedText()" />
<input type="text" id="txt" />
</form>
<p>点击上面的按钮，输出的文本将告诉你2秒，4秒，6秒已经过去了。</p>
</body>
</html>
Running example»Click the "Run Instance" button to view the online instance
