JavaScript 计时事件

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)">Try it</button>

<script>
function myFunction() {
alert('Hello');
}
</script>

亲自试一试 »

如何停止执行？

这个clearTimeout()方法停止 setTimeout() 中指定的函数的执行。

window.clearTimeout( timeoutVariable)

这个window.clearTimeout()方法可以不带 window 前缀编写。

这个clearTimeout()方法使用从返回的变量setTimeout()：

myVar = setTimeout( function, milliseconds);
clearTimeout(myVar);

如果该函数尚未执行，可以通过调用停止执行clearTimeout()方法：

示例

与上面的示例相同，但添加了 "Stop" 按钮：

亲自试一试 »

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);

示例

与上面的示例相同，但我们添加了一个 "Stop time" 按钮：

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

亲自试一试 »

码农教程 - 一技在手,衣食无忧!

JavaScript 计时事件

计时事件

setTimeout() 方法

示例

如何停止执行？

示例

setInterval() 方法

示例

如何停止执行？

示例

更多示例