JavaScript - 定时事件
什么是定时事件?
JavaScript 定时事件用于在指定时间后执行代码(一次或多次)。在 JavaScript 中，您可以使用定时事件来控制特定任务的执行时间。
"window"对象包含各种定时事件方法，您可以使用这些方法安排任务。您可以使用窗口对象调用这些方法，也可以不使用窗口对象。
以下是可用于安排任务的方法列表。
| 方法 | 描述 |
|---|---|
| setTimeout() | 在 N 毫秒后仅执行一次代码。 |
| clearTimeout() | 清除使用 setTimeOut() 方法设置的超时时间。 |
| setInterval() | 执行每 N 毫秒执行一次特定任务。 |
| clearInterval() | 清除使用 setInterval() 方法设置的间隔。 |
让我们通过下面的示例来理解定时事件。
setTimeout() 方法
<html>
<body>
<div id = "output">The message will be printed after 2000 milliseconds! <br></div>
<script>
setTimeout(() => {
document.getElementById('output').innerHTML += 'Hello World <br>';
}, 2000);
</script>
</body>
</html>
输出
The message will be printed after 2000 milliseconds! Hello World
clearTimeout() 方法
在下面的示例中，我们使用 setTimeout() 方法在 3000 毫秒后打印"hello world"。我们使用 clearTimeout() 方法来阻止 setTimeout() 方法的执行。
示例
<html>
<body>
<p>Message will print after 3 seconds.</p>
<p>Click the button to prevent timeout to execute.</p>
<p id="demo"></p>
<button onclick="stop()">Clear Timeout</button>
<script>
const myTimeout = setTimeout(greet, 3000);
function greet() {
document.getElementById("demo").innerHTML = "Hello World!"
}
function stop() {
clearTimeout(myTimeout);
}
</script>
</body>
</html>
输出
setInterval() 和 clearInterval() 方法
在下面的代码中，我们使用 setInterval() 方法在每次递增 10 后以及每秒显示一个数字。
当数字达到 50 时，我们使用 clearInterval() 方法停止计时器。
示例
<html>
<body>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let number = 10;
let id = setInterval(() => {
if (number == 50) {
clearInterval(id);
output.innerHTML += "The time is stopped."
}
output.innerHTML += "The number is: " + number + "<br>";
number += 10;
}, 1000);
</script>
</body>
</html>
输出
The number is: 10 The number is: 20 The number is: 30 The number is: 40 The time is stopped.The number is: 50
计时事件的实时用例
在这里，您将了解计时事件的实时用例。
- 用于动画和过渡
- 用于幻灯片和轮播
- 用于倒计时器
- 用于用户身份验证超时
- 像 Google 文档一样自动保存草稿
- 用于安排通知、电子邮件、消息等
- 像银行网站一样终止会话
- 用于进度条
但是，还有其他用例。您可以使用 setTimeOut() 或 setInterval() 方法实现上述功能。
下一步是什么?
在接下来的章节中，您将详细学习 setTimeOut() 和 setInterval() 方法。
