JavaScript 定时事件
|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript 可以在设定的时间间隔内执行。 这被称为定时事件。 |
定时事件
window 对象允许在设定的时间间隔内执行代码。
这些时间间隔被称为定时事件。
要使用 JavaScript 的两个关键方法是
setTimeout(函数, 毫秒)
在等待指定的毫秒数后执行一个函数。setInterval(函数, 毫秒)
与 setTimeout() 相同，但会连续重复执行函数。
setTimeout() 和 setInterval() 都是 HTML DOM Window 对象的的方法。
setTimeout() 方法
window.setTimeout(函数,毫秒);
可以省略 window.setTimeout() 方法的 window 前缀。
第一个参数是要执行的函数。
第二个参数表示执行前的毫秒数。
示例
点击一个按钮。等待 3 秒后，页面将弹出“Hello”
<button onclick="setTimeout(myFunction, 3000)">尝试一下</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
自己动手试一试 »
如何停止执行？
clearTimeout() 方法停止执行 setTimeout() 中指定的函数。
window.clearTimeout(timeoutVariable)
可以省略 window.clearTimeout() 方法的 window 前缀。
clearTimeout() 方法使用从 setTimeout() 返回的变量
myVar = setTimeout(函数,毫秒);
clearTimeout(myVar);
如果函数尚未执行，您可以通过调用 clearTimeout() 方法来停止执行
示例
与上面相同的示例，但添加了一个“停止”按钮
<button onclick="myVar = setTimeout(myFunction, 3000)">尝试一下</button>
<button onclick="clearTimeout(myVar)">停止它</button>
自己动手试一试 »
setInterval() 方法
setInterval() 方法在每个给定的时间间隔重复一个给定的函数。
window.setInterval(函数,毫秒);
可以省略 window.setInterval() 方法的 window 前缀。
第一个参数是要执行的函数。
第二个参数表示每次执行之间的时间间隔长度。
此示例每秒执行一次名为“myTimer”的函数（就像数字手表一样）。
示例
显示当前时间
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
自己动手试一试 »
一秒钟有 1000 毫秒。
如何停止执行？
clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。
window.clearInterval(timerVariable)
可以省略 window.clearInterval() 方法的 window 前缀。
clearInterval() 方法使用从 setInterval() 返回的变量
let myVar = setInterval(函数,毫秒);
clearInterval(myVar);
示例
与上面相同的示例，但我们添加了一个“停止时间”按钮
<p id="demo"></p>
<button onclick="clearInterval(myVar)">停止时间</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
自己动手试一试 »
