无需登录 数据私有 本地保存

周期任务模拟器 - setInterval可视化运行

15
0
0
0

周期任务模拟器

setInterval 可视化运行 · 直观理解定时器机制

setInterval
1000ms
500ms
⚠️ 执行耗时 ≥ 间隔时间！任务将不断积压，队列持续增长。
0
周期进度
0
已执行
0
排队中
0.00s
模拟时间

📋 周期状态

执行时间轴 （色块 = 任务执行区间 | 蓝点 = 触发点 | 红线 = 当前时刻）

触发点 执行中 已完成 排队积压
实时日志
🟢 模拟器就绪。请设置参数后点击「启动」。
常见问题 & 知识点

setInterval(callback, delay) 会每隔 delay 毫秒将回调函数加入事件队列。如果主线程空闲，回调会立即执行；如果主线程繁忙（例如上一个回调还在执行），新触发的回调会排队等待，但不会并发执行——因为 JavaScript 是单线程的。本工具通过时间轴直观展示了这一过程。

这是 setInterval 常见的陷阱。如果回调执行耗时 ≥ 间隔时间，后续触发会不断累积到队列中，导致任务积压。在本工具中，将「执行耗时」调至大于等于「间隔时间」即可观察到此现象：排队计数会持续增长，时间轴上出现红色积压块。建议在回调耗时不确定时改用 setTimeout 递归调用。

setInterval：固定间隔触发，不考虑回调执行耗时，可能导致积压。
递归 setTimeout：在回调执行完毕后再设置下一次定时，间隔 = 回调耗时 + 延迟时间，不会积压。对于需要稳定间隔且回调耗时不可忽略的场景，推荐使用递归 setTimeout。

当标签页处于后台时，浏览器会对 setInterval 进行节流，最小间隔通常被限制为 1000ms（1秒）。这意味着即使设置了 100ms 的间隔，后台时实际触发间隔也会变为 1000ms。这是浏览器为了节省资源的优化策略。

使用 clearInterval(id) 并传入 setInterval 返回的 ID。注意：必须在清除前保存该 ID，且确保在组件卸载或页面离开时清除，否则会导致内存泄漏。在 React/Vue 等框架中，通常在 useEffect 的清理函数或 onUnmounted 中执行清除。

setInterval 的延迟精度受限于浏览器的事件循环机制，最小实际间隔约为 4-10ms（取决于浏览器）。设置为 0ms 时，浏览器会自动将其提升到最小值。对于高精度定时需求（如动画、游戏循环），应使用 requestAnimationFrame 或 performance.now() 配合手动调度。
🔧 相关工具