0Pricing
JavaScript Academy · 课时

setTimeout、setInterval 与计时器漂移

使用 setTimeout/setInterval 安排一次性和重复任务，并学习一种减少计时器漂移的简单技巧

setTimeout、setInterval 与计时器漂移 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 3 节课。

计时器简介

目标：整洁地安排任务。

  • setTimeout：稍后运行一次
  • setInterval：重复运行
  • 漂移：计时器为何会逐渐偏离
  • 简单的漂移修复
setTimeout、setInterval 与计时器漂移 — 插图 1

setTimeout — 单次运行

setTimeout(函数, 毫秒)会在延迟之后运行一次（这是最短计时，并非精确时间）。

// setTimeout schedules a one-off callback
console.log("A: start");

setTimeout(function () {
  console.log("B: after ~5ms");
}, 5);

console.log("C: scheduled");
setTimeout、setInterval 与计时器漂移 — 插图 2

setInterval — 重复运行

setInterval会自动重复运行；使用clearInterval(标识)停止。

// setInterval repeats; always clear it
let count = 0;

const id = setInterval(function () {
  count = count + 1;
  console.log("tick", count);

  // Stop after 3 ticks to avoid endless logs
  if (count >= 3) {
    clearInterval(id);
    console.log("stopped");
  }
}, 5);
setTimeout、setInterval 与计时器漂移 — 插图 3

观察漂移的产生

实际间隔会有所不同；工作负载、设备负载和事件循环都会造成漂移。

// Drift demo: expected vs actual timing
const targetMs = 5;
let last = Date.now();
let times = 0;

const driftId = setInterval(function () {
  const now = Date.now();
  const gap = now - last; // actual gap
  last = now;
  times = times + 1;
  console.log("gap~", gap, "ms");

  if (times >= 3) {
    clearInterval(driftId);
    console.log("done");
  }
}, targetMs);
setTimeout、setInterval 与计时器漂移 — 插图 4

对齐调度

对齐到不断变化的expected时间：根据它计算下一次延迟，以避免误差不断累积。

// Simple drift fix: schedule from the expected time
const step = 5;
let expected = Date.now() + step;
let ticks = 0;

function tick() {
  ticks = ticks + 1;
  const now = Date.now();
  const drift = now - expected; // positive if we are late
  console.log("drift:", drift, "ms");

  // Compute next expected time first
  expected = expected + step;

  // Next delay = time until the next expected timestamp
  const nextDelay = Math.max(0, expected - Date.now());

  if (ticks < 3) {
    setTimeout(tick, nextDelay);
  } else {
    console.log("aligned stop");
  }
}

setTimeout(tick, step);
setTimeout、setInterval 与计时器漂移 — 插图 5

技巧与检查清单

技巧：

  • 完成后始终使用clearInterval。
  • 对于稳定的节奏，优先使用对齐时间的setTimeout循环。
  • 让计时器回调保持简短，以减少漂移。
setTimeout、setInterval 与计时器漂移 — 插图 6

漂移修复测验

快速检查：减少漂移。

setTimeout、setInterval 与计时器漂移 — 插图 7

回顾

回顾：使用setTimeout处理单次任务，使用setInterval处理重复任务（记得清除），并通过将下一次运行对齐到 expected 时间来减少漂移。

setTimeout、setInterval 与计时器漂移 — 插图 8

常见问题解答

「setTimeout、setInterval 与计时器漂移」课时是免费的吗？

是的 — 「setTimeout、setInterval 与计时器漂移」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 3 节课。

「setTimeout、setInterval 与计时器漂移」这节课中我会学到什么？

使用 setTimeout/setInterval 安排一次性和重复任务，并学习一种减少计时器漂移的简单技巧 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。

「setTimeout、setInterval 与计时器漂移」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. setTimeout、setInterval 与计时器漂移
  2. 防抖与节流——手动实现
  3. 动画计时——使用基于时间的循环入门
← 返回 JavaScript Academy