JavaScript setTimeout

摘要：在本教程中，您将学习如何使用 JavaScript setTimeout() 来设置计时器并在计时器到期后执行回调函数。

JavaScript setTimeout() 简介

setTimeout() 是 window 对象的方法。setTimeout() 设置计时器并在计时器到期后执行 回调函数。

以下说明了 setTimeout() 的语法：

let timeoutID  = setTimeout(cb [,delay], arg1, arg2,...);
Code language: JavaScript (javascript)

在此语法中：

•  cb 是计时器到期后要执行的 回调函数。
• delay 是计时器在执行回调函数之前应等待的时间（以毫秒为单位）。如果省略它，则 delay 默认值为 0。
• arg1、arg2 等是传递给 cb 回调函数的参数。

setTimeout() 返回一个 timeoutID，它是一个正整数，标识通过调用该方法创建的计时器。

timeoutID 可用于通过将其传递给 clearTimeout() 方法来取消超时。

JavaScript setTimeout() 示例

以下创建了两个简单的按钮，并将它们连接到 setTimeout() 和 clearTimeout()。

当您单击“显示”按钮时，将调用 showAlert()，并在 3 秒后显示一个警报对话框。要取消超时，请单击“取消”按钮。

HTML

<p>JavaScript setTimeout Demo</p>
<button onclick="showAlert();">Show</button>
<button onclick="cancelAlert();">Cancel</button>
Code language: HTML, XML (xml)

JavaScript

var timeoutID;

function showAlert() {
    timeoutID = setTimeout(alert, 3000, 'setTimeout Demo!');
}

function clearAlert() {
    clearTimeout(timeoutID);
}
Code language: JavaScript (javascript)

输出

JavaScript setTimeout() 的工作原理

JavaScript 是单线程的，因此它一次只能执行一项任务。这意味着它在给定时间只能执行一项任务。除了 JavaScript 引擎之外，Web 浏览器还具有其他组件，例如 事件循环、调用堆栈 和 Web API。

当您调用 setTimeout() 时，JavaScript 引擎会创建一个新的函数 执行上下文 并将其放置在 调用堆栈 中。

setTimeout() 执行并在 Web 浏览器的 Web API 组件中创建计时器。当计时器到期时，在 setTimeout() 中传递的回调函数将被放置到回调队列中。

事件循环 同时监控调用堆栈和回调队列。当调用堆栈为空时，它会从回调队列中移除回调函数并将其放置到调用堆栈中。

回调函数一旦进入调用堆栈，就会被执行。

请参见以下示例

function task() {
    console.log('setTimeout Demo!')
}

setTimeout(task, 3000);
Code language: JavaScript (javascript)

在此示例中：

首先，setTimeout() 被放置在调用堆栈中。它在 Web API 中创建计时器。

其次，大约 3 秒后，计时器到期，task 被推入回调队列，并等待下一次执行机会。

第三，由于调用堆栈为空，事件循环会将 task() 从回调队列中移除，将其放置到调用堆栈中并执行它。

第四，setTimeout() 中的 console.log() 执行，创建一个新的函数执行上下文。

最后，console.log() 和 task() 一旦完成，就会从调用堆栈中弹出。

摘要

• setTimeout() 是 window 对象的方法。
• setTimeout() 设置计时器，并在计时器到期时执行回调函数。