JS中【定时器】解读与扩展

在JavaScript中，定时器是一组用于调度任务的机制，主要通过 setTimeout 和 setInterval 函数实现。这两个方法在前端开发和异步编程中非常常用，涉及到定时任务、延迟执行、轮询操作等场景。下面详细讲解定时器相关的知识点。

1. setTimeout(fn, delay,[arg1, arg2, ...])

setTimeout 用于在指定的延迟时间后执行一次函数。语法如下：

let timeoutID = setTimeout(callbackFunction, delayInMilliseconds);

• fn: 要执行的回调函数。
• delay: 延迟的时间，以毫秒为单位。如果为 0，表示尽快执行（并不是立即，而是在当前事件循环的任务执行完毕后再执行）。
• arg1, arg2, ...（可选）：传递给 fn 的参数

特点：

• 一次性执行：setTimeout 的回调函数只执行一次，不会重复。
• 事件循环：即使 delay 为 0，回调函数也不会立即执行，因为 JavaScript 是单线程的，必须等待当前任务完成后再插入下一个任务。

示例：

setTimeout(() => {
  console.log('2秒后执行');
}, 2000);

2. clearTimeout(timeoutID)

clearTimeout 用于取消由 setTimeout 设置的定时任务。传入的参数是 setTimeout 的返回值，即 timeoutID。

示例：

let timeoutID = setTimeout(() => {
  console.log('这条信息不会被打印');
}, 5000);

clearTimeout(timeoutID); // 取消定时任务

3. setInterval(fn, delay,[arg1, arg2, ...])

setInterval 用于每隔固定的时间间隔执行一次函数，直到被取消。语法如下：

let intervalID = setInterval(callbackFunction, delayInMilliseconds);

• fn: 每次触发时要执行的回调函数。
• delay: 两次回调之间的时间间隔，以毫秒为单位。
• arg1, arg2, ...（可选）：传递给 fn 的参数

特点：

• 重复执行：setInterval 会一直执行，直到调用 clearInterval 或者页面关闭为止。
• 注意事项：如果回调函数的执行时间超过了 delay 时间间隔，下一次回调会在前一次执行完毕后立即执行。

示例：

let count = 0;
let intervalID = setInterval(() => {
  count++;
  console.log(`每1秒执行一次: ${count}`);
  if (count === 5) clearInterval(intervalID);  // 执行5次后取消
}, 1000);

4. clearInterval(intervalID)

clearInterval 用于取消由 setInterval 设置的定时任务。传入的参数是 setInterval 的返回值，即 intervalID。

示例：

let intervalID = setInterval(() => {
  console.log('不会持续执行');
}, 2000);

clearInterval(intervalID); // 取消定时任务

5. 嵌套的 setTimeout

有时候为了替代 setInterval，我们可以使用递归的 setTimeout 实现类似的效果。这种方法避免了 setInterval 潜在的任务堆积问题。

示例：

function repeatTask() {
  console.log('每隔1秒执行一次任务');
  setTimeout(repeatTask, 1000); // 递归调用
}
setTimeout(repeatTask, 1000);

6. 微任务与宏任务的区别

在 JavaScript 中，定时器的回调函数是作为宏任务执行的。JavaScript 的事件循环分为宏任务和微任务，常见的宏任务有：setTimeout、setInterval、UI渲染等；微任务有：Promise 的 then、MutationObserver 等。

顺序执行：

• 先执行一个宏任务，接着检查是否有微任务。如果有，则会依次执行微任务。
• 所有微任务执行完毕后，再回到宏任务队列，继续处理下一个宏任务。

示例：

setTimeout(() => console.log('宏任务1'), 0);
Promise.resolve().then(() => console.log('微任务1'));
Promise.resolve().then(() => console.log('微任务2'));
setTimeout(() => console.log('宏任务2'), 0);

// 输出顺序：
// 微任务1 -> 微任务2 -> 宏任务1 -> 宏任务2

7. 延迟误差与精度

JavaScript 的定时器不保证精确的时间延迟。由于单线程和事件循环的特性，定时器的实际执行时间可能比预期时间有所延迟。特别是在页面负载较高时，定时器的精度可能会下降。

示例：

setTimeout(() => {
  console.log('可能比预期时间略晚执行');
}, 1000);

8. 浏览器的节电机制

浏览器为了节省资源，当页面处于后台（tab被切换或者浏览器被最小化时），定时器的精度通常会被降低

，甚至可能延迟到1秒或更长时间。现代浏览器中，若页面处于后台，定时器会被“节能模式”影响，以减少资源的浪费。这对于优化电池续航和减少不必要的 CPU 使用非常有用。

9. requestAnimationFrame

对于动画和更高精度的定时任务，requestAnimationFrame 是一个更优的选择。它会在下一次浏览器重绘之前执行回调函数，确保动画能够以更流畅的帧率呈现出来。

语法：

let requestID = requestAnimationFrame(callbackFunction);

取消动画帧：
通过 cancelAnimationFrame 来取消先前通过 requestAnimationFrame 注册的回调。

示例：

let start;

function step(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;
  console.log(progress);  // 每帧输出时间间隔
  if (progress < 2000) {  // 持续2秒
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

10. 使用场景总结

• setTimeout: 用于延迟某个任务的执行（例如延迟显示弹窗或轮询任务的递归实现）。
• setInterval: 用于周期性执行任务（例如轮询数据、倒计时或定时刷新页面内容）。
• 嵌套 setTimeout: 用于避免定时器堆积，保持每个任务之间有适当间隔，适合需要精确控制任务执行的场景。
• requestAnimationFrame: 更适用于动画和需要与页面刷新率同步的场景。

定时器是前端开发中非常重要的工具，了解其工作原理和使用场景能够帮助开发者更好地控制任务执行和优化用户体验。