我们可能决定不立即执行某个功能，但在某个时间之后执行。这叫做“安排一个电话”。

它有两种方法：

• setTimeout 允许我们在一段时间后运行一次函数。
• setInterval 允许我们重复运行一个函数，从时间间隔开始，然后以该间隔连续重复。

这些方法不是JavaScript规范的一部分。但是大多数环境都有内部调度程序并提供这些方法。特别是，它们在所有浏览器和Node.js中都受支持。

的setTimeout

语法：

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

参数：

func|code

函数或要执行的代码串。通常，这是一个功能。由于历史原因，可以传递一串代码，但不建议这样做。

delay

运行前的延迟，以毫秒（1000毫秒= 1秒）为单位，默认为0。

arg1，arg2...

该函数的参数（IE9中不支持）

例如，此代码sayHi()在一秒后调用：

function sayHi() {
  alert(‘Hello‘);
}

setTimeout(sayHi, 1000);

有参数：

function sayHi(phrase, who) {
  alert( phrase + ‘, ‘ + who );
}

setTimeout(sayHi, 1000, "Hello", "John"); // Hello, John

如果第一个参数是一个字符串，那么JavaScript会从中创建一个函数。

所以，这也有效：

setTimeout("alert(‘Hello‘)", 1000);

但是不推荐使用字符串，使用函数代替它们，如下所示：

setTimeout(() => alert(‘Hello‘), 1000);

// wrong!
setTimeout(sayHi(), 1000);

使用clearTimeout取消

调用setTimeout返回“计时器标识符” timerId，我们可以使用它来取消执行。

要取消的语法：

let timerId = setTimeout(...);
clearTimeout(timerId);

在下面的代码中，我们安排该功能，然后取消它（改变了我们的想法）。结果，没有任何反应：

let timerId = setTimeout(() => alert("never happens"), 1000);
alert(timerId); // timer identifier

clearTimeout(timerId);
alert(timerId); // same identifier (doesn‘t become null after canceling)

正如我们从alert输出中看到的，在浏览器中，计时器标识符是一个数字。在其他环境中，这可能是其他原因。例如，Node.js返回带有其他方法的计时器对象。

同样，这些方法没有通用规范，所以没关系。

对于浏览器，定时器在HTML5标准的定时器部分中描述。

的setInterval

该setInterval方法具有与以下相同的语法setTimeout：

let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)

所有论点都有相同的含义。但不像setTimeout它不仅运行一次，而且在给定的时间间隔后定期运行。

要停止进一步通话，我们应该打电话clearInterval(timerId)。

以下示例将每2秒显示一条消息。5秒后，输出停止：

// repeat with the interval of 2 seconds
let timerId = setInterval(() => alert(‘tick‘), 2000);

// after 5 seconds stop
setTimeout(() => { clearInterval(timerId); alert(‘stop‘); }, 5000);

嵌套的setTimeout

有两种方法可以定期运行。

一个是setInterval。另一个是嵌套的setTimeout，如下所示：

/** instead of:
let timerId = setInterval(() => alert(‘tick‘), 2000);
*/

let timerId = setTimeout(function tick() {
  alert(‘tick‘);
  timerId = setTimeout(tick, 2000); // (*)
}, 2000);

在setTimeout上述安排下一次调用就在当前的结束(*)。

嵌套setTimeout是比一种更灵活的方法setInterval。这样，可以不同地调度下一个呼叫，这取决于当前呼叫的结果。

例如，我们需要编写一个服务，每隔5秒向服务器发送一个请求数据的请求，但是如果服务器过载，它应该将间隔增加到10,20,40秒......

这是伪代码：

let delay = 5000;

let timerId = setTimeout(function request() {
  ...send request...

  if (request failed due to server overload) {
    // increase the interval to the next run
    delay *= 2;
  }

  timerId = setTimeout(request, delay);

}, delay);

如果我们正在安排的功能是CPU耗尽的，那么我们可以测量执行所花费的时间并迟早计划下一次调用。

嵌套setTimeout允许更精确地设置执行之间的延迟setInterval。

让我们比较两个代码片段。第一个使用setInterval：

let i = 1;
setInterval(function() {
  func(i);
}, 100);

第二个使用嵌套setTimeout：

let i = 1;
setTimeout(function run() {
  func(i);
  setTimeout(run, 100);
}, 100);

对于setInterval内部调度程序将func(i)每100ms 运行一次：

你注意到了吗？

func呼叫之间的实际延迟setInterval小于代码！

这是正常的，因为func执行所花费的时间“消耗”了间隔的一部分。

这可能是func的执行结果是比我们预期的时间更长，花的时间超过100毫秒。

在这种情况下，引擎等待func完成，然后检查调度程序，如果时间到了，立即再次运行它。

在边缘情况下，如果函数总是执行的时间长于delayms，则调用将完全没有暂停。

这是嵌套的图片setTimeout：

嵌套setTimeout保证固定延迟（此处为100ms）。

那是因为计划在前一个呼叫结束时进行新呼叫。

// the function stays in memory until the scheduler calls it
setTimeout(function() {...}, 100);

零延迟setTimeout

有一个特殊的用例：setTimeout(func, 0)或者只是setTimeout(func)。

这样func可以尽快安排执行。但是调度程序只有在当前执行的脚本完成后才会调用它。

因此该函数被安排在“当前脚本之后”运行。

例如，输出“Hello”，然后立即“World”：

setTimeout(() => alert("World"));

alert("Hello");

第一行“在0ms之后将呼叫置于日历中”。但是调度程序只会在当前脚本完成后“检查日历”，因此"Hello"首先，然后"World"- 在它之后。

还有与延迟浏览器相关的零延迟超时用例，我们将在事件循环一章中讨论：微任务和宏任务。

let start = Date.now();
let times = [];

setTimeout(function run() {
  times.push(Date.now() - start); // remember delay from the previous call

  if (start + 100 < Date.now()) alert(times); // show the delays after 100ms
  else setTimeout(run); // else re-schedule
});

// an example of the output:
// 1,1,1,1,9,15,20,24,30,35,40,45,50,55,59,64,70,75,80,85,90,95,100

摘要

• 方法setTimeout(func, delay, ...args)并setInterval(func, delay, ...args)允许我们func在delay毫秒之后运行一次/定期运行。
• 要取消执行，我们应该clearTimeout/clearInterval使用返回的值调用setTimeout/setInterval。
• 嵌套setTimeout调用是一种更灵活的替代方法setInterval，允许我们更精确地设置执行之间的时间。
• 使用setTimeout(func, 0)（相同setTimeout(func)）的零延迟调度用于“尽快，但在当前脚本完成后”调度呼叫。
• 浏览器将五个或更多嵌套调用的最小延迟限制setTimeout为setInterval（在第五次调用之后）到4ms。这是出于历史原因。

请注意，所有调度方法都不能保证确切的延迟。

例如，浏览器中的计时器可能会因为很多原因而变慢：

• CPU过载。
• 浏览器选项卡处于后台模式。
• 笔记本电脑是电池。

所有这些都可能将最小定时器分辨率（最小延迟）提高到300ms甚至1000ms，具体取决于浏览器和操作系统级别的性能设置。