JavaScript 定时事件
|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript 代码可以在特定时间间隔内执行。 这被称为定时事件。 |
定时事件
window 对象允许在指定的时间间隔内执行代码。
这些时间间隔被称为定时事件。
JavaScript 中使用的两个主要方法是
setTimeout(function, milliseconds)
在等待指定毫秒数后执行函数。setInterval(function, milliseconds)
与 setTimeout() 相同，但会持续重复执行函数。
setTimeout() 和 setInterval() 都是 HTML DOM Window 对象的方法。
setTimeout() 方法
window.setTimeout(function, milliseconds);
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 前缀。
使用 setTimeout() 返回的变量，clearTimeout() 方法可以取消定时器。
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
如果函数尚未执行，可以通过调用 clearTimeout() 方法来停止执行。
示例
与上面的例子相同，但添加了一个“停止”按钮。
<button onclick="myVar = setTimeout(myFunction, 3000)">尝试</button>
<button onclick="clearTimeout(myVar)">停止</button>
自己试试看 »
setInterval() 方法
setInterval() 方法会以给定的时间间隔重复执行给定的函数。
window.setInterval(function, milliseconds);
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(function, milliseconds);
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>
自己试试看 »
