BOM动画依赖事件循环调度定时器实现，核心是定时器回调触发重排重绘；setInterval适合周期性更新但需手动清除，setTimeout递归更灵活可控。
JavaScript 中 BOM 动画不靠“帧率控制”，而是靠事件循环调度定时器，结合 DOM 更新实现视觉连续变化。核心在于：定时器回调进入任务队列，主线程空闲时执行，再触发重排（reflow）和重绘（repaint）。只要间隔合理、DOM 操作轻量，就能形成平滑动画。
用 setInterval 实现基础动画循环
setInterval 每隔固定毫秒执行一次回调，适合周期性更新（如移动、旋转、颜色渐变）。
- 推荐间隔设为 16ms（≈60fps），但实际受主线程负载影响，并非严格准时
- 必须手动清除定时器（clearInterval），否则内存泄漏且动画失控
- 避免在回调中做耗时操作（如大量 DOM 查询、复杂计算），否则掉帧明显
示例：让一个 div 向右匀速移动
let pos = 0;const box = document.getElementById('box');
const timer = setInterval(() => {
pos += 2;
box.style.transform = `translateX(${pos}px)`;
if (pos >= 400) clearInterval(timer);
}, 16);
用 setTimeout 替代 setInterval 实现更可控的动画
setTimeout 是单次触发，但可递归调用自身，比 setInterval 更灵活——能动态调整下一次延迟、提前终止、响应状态变化。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 每次更新后重新调用 setTimeout，相当于“手动驱动下一帧”
- 便于结合 requestAnimationFrame 的思路（比如用 performance.now() 计算真实耗时，补偿延迟）
- 动画暂停/加速/反向时逻辑更清晰，无需管理 interval ID
示例：带速度调节的弹性移动
let pos = 0, speed = 3;function animate() {
pos += speed;
box.style.left = pos + 'px';
if (pos setTimeout(animate, 16);
}
}
与事件循环配合的关键细节
定时器不是“精确计时器”，而是把回调推入宏任务队列；执行时机取决于主线程是否空闲。
- 若前一个定时器回调执行超时（比如卡在长任务里），后续回调会堆积或跳过，造成动画卡顿
- 浏览器可能对后台标签页节流 setTimeout/setInterval（延迟拉长至 1000ms），动画暂停是正常行为
- 频繁修改 style 属性会触发同步重排，应优先用 transform 和 opacity（触发合成层，性能更好）
- 可搭配 performance.now() 监测帧耗时，判断是否需要降帧或优化逻辑
更现代的替代方案：requestAnimationFrame
虽然问题聚焦于 setTimeout/setInterval，但需指出：BOM 动画首选 requestAnimationFrame（rAF）。
- rAF 由浏览器调度，在下次重绘前执行，天然对齐屏幕刷新节奏，比 16ms 定时器更精准稳定
- 页面不可见时自动暂停，省电省资源
- 使用方式类似递归 setTimeout，但语义更明确，兼容性已覆盖所有现代浏览器
简单迁移示例：
function animate() {pos += speed;
box.style.transform = `translateX(${pos}px)`;
if (pos }
requestAnimationFrame(animate);
