JavaScript 调度：setTimeout 和 setInterval

JavaScript 提供了两种主要的调度方法，允许你在特定时间后或在固定间隔执行代码。

setTimeout

setTimeout 方法用于在指定的毫秒数后执行一次函数或代码片段。

基本语法

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

• func|code：要执行的函数或代码字符串（通常使用函数）
• delay：延迟的毫秒数（默认为0）
• arg1, arg2...：传递给函数的参数（IE9及以下不支持）

示例

// 3秒后显示提示
setTimeout(() => {
  alert('3秒已过');
}, 3000);

// 带参数的函数
function sayHi(phrase, who) {
  alert(phrase + ', ' + who);
}

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

取消调度

使用 clearTimeout 可以取消尚未执行的 setTimeout：

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

setInterval

setInterval 方法与 setTimeout 类似，但会重复执行代码，直到被清除。

基本语法

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

参数与 setTimeout 相同。

示例

// 每2秒重复一次
let timerId = setInterval(() => {
  alert('每2秒出现一次');
}, 2000);

// 5秒后停止
setTimeout(() => {
  clearInterval(timerId);
  alert('停止');
}, 5000);

取消重复调度

使用 clearInterval 可以停止 setInterval 的重复执行：

let timerId = setInterval(...);
clearInterval(timerId);

嵌套的 setTimeout

作为 setInterval 的替代方案，可以使用嵌套的 setTimeout：

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

这种方法比 setInterval 更灵活，可以确保每次执行之间的间隔更精确，因为下一次调用是在前一次调用完成后才计划的。

零延迟的 setTimeout

setTimeout(func, 0) 或 setTimeout(func) 表示"尽快"执行函数，但会在当前脚本执行完毕后调用。

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

alert("Hello");
// 输出顺序: Hello → World

实际应用注意事项

1. 浏览器中的最小延迟：嵌套定时器在浏览器中有最小延迟（HTML5标准规定至少4ms）
2. 节流和防抖：这些定时器常用于实现节流(throttling)和防抖(debouncing)技术
3. 垃圾回收：定时器函数会保留对外部变量的引用，可能导致内存泄漏
4. 页面隐藏时：在后台标签页中，浏览器可能会降低定时器的执行频率以节省资源

总结

• setTimeout(func, delay, ...args) — 在 delay 毫秒后执行 func 一次
• setInterval(func, delay, ...args) — 每隔 delay 毫秒重复执行 func
• clearTimeout/clearInterval — 取消相应的调度
• 嵌套的 setTimeout 比 setInterval 更灵活可靠
• 零延迟调度 (setTimeout(func, 0)) 用于在当前脚本执行完后"尽快"调用函数

这些调度方法是 JavaScript 异步编程的基础工具，广泛应用于动画、轮询、延迟操作等场景。