1. setInterval 的基本用法
1.1 语义与参数
作用机制：setInterval 会在您设定的时间间隔内，持续重复执行一个回调函数，直到被 clearInterval 终止。这个特性使得它适合实现周期性任务，如轮询数据、更新 UI 状态等活动。
核心参数：回调函数、时间间隔（毫秒），以及可选的后续参数将会传递给回调。该行为使得同一个定时器在每次触发时都能获取外部上下文信息。
let i = 0;
const id = setInterval(() => {i++;console.log('Tick', i);
}, 1000);在上面的示例中，返回值 id 是后续清除定时器的唯一标识，1000 指定每次回调的间隔为 1 秒，回调内部可以通过外部变量进行状态管理。
附加参数：如果需要将额外信息传给回调，可以在 delay 之后直接传入参数，回调会接收到这些参数。
1.2 与 setTimeout 的关系
本质差异：setInterval 会在固定时间间隔重复执行，而 setTimeout 只执行一次，若要重复需要再次调用。
节流与漂移：在单线程的浏览器环境中，若前一个回调尚未完成，下一次触发可能会被排队，导致 精确性下降，出现漂移现象。
// 使用 setTimeout 模拟固定节拍，避免漂移
function tick() {console.log('tick');setTimeout(tick, 1000);
}
setTimeout(tick, 1000);替代策略：如果需要更高的可控性和更低的漂移，建议结合 setTimeout 循环或考虑以 requestAnimationFrame（用于与屏幕刷新同步的场景）替代。
1.3 使用场景概览
轮询数据：在需要定期从服务器拉取最新数据时，setInterval 可以保持稳定 cadence，便于实现数据刷新 UI。
心跳信号：在分布式系统或客户端与服务端维持健康连接时，定时发送心跳有助于发现异常情况并触发重连逻辑。
周期性档案更新：对本地状态进行周期性快照或缓存刷新，有助于提升交互体验和数据一致性。
2. setInterval 的实战要点与坑
2.1 正确清除与防重复
清除定时器：
在不再需要时，应调用 clearInterval 来释放资源，避免内存泄漏和无穷执行。
let timer;
function start() {if (timer) clearInterval(timer);timer = setInterval(() => {console.log('doing periodic work');}, 1000);
}
start();防重复启动：在启动前检查是否已经存在定时器，确保不会多次创建同一个任务。
2.2 与页面生命周期的关系
可见性与节流：当页面进入后台或被最小化时，浏览器可能会对计时器进行节流或暂停，从而影响定时执行的及时性。
为了避免无意的资源浪费，可以在 可见性变化事件 中暂停或调整间隔，并在重新可见时再启动。
let timer;
function start() {timer = setInterval(() => {console.log('tick while visible');}, 1000);
}
document.addEventListener('visibilitychange', () => {if (document.hidden) {clearInterval(timer);} else {start();}
});2.3 定时任务的替代方案与优化
动画与高频更新：对于需要与显示刷新同步的场景，优先考虑 requestAnimationFrame，以获得更平滑的视觉效果。
后台与计算密集任务：将工作移到 Web Worker，避免阻塞 UI 线程，同时保留定时触发的能力。
动态节拍与退出策略：采用 动态延迟+自回调（setTimeout 循环），根据任务完成时间和页面可见性自适应调节间隔，从而降低不确定性。
3. 场景演示：数据轮询与心跳
3.1 数据轮询示例
场景描述：需要定期从服务端获取最新数据并更新界面时，setInterval 提供稳定的轮询节拍。
实现要点：在轮询中对返回结果进行错误处理、请求并发控制，以及在需要时清除定时器以释放资源。
const POLL_INTERVAL = 15000; // 15s
let pollId = setInterval(async () => {try {const res = await fetch('/api/data');if (!res.ok) throw new Error('Network response was not ok');const data = await res.json();// 更新界面（数据绑定、渲染）console.log('poll data', data);} catch (err) {console.error('轮询失败', err);}
}, POLL_INTERVAL);3.2 心跳与后台任务
心跳作用：定期向服务端汇报客户端状态，帮助服务端判断连接是否可用，必要时触发重连或告警。
实现要点：避免在回调中进行阻塞性操作，将网络请求尽量简化，必要时结合 navigator.sendBeacon 或快速的非阻塞请求。
function startHeartbeat(url, interval) {return setInterval(() => {fetch(url).catch(err => console.error('heartbeat error', err));}, interval);
}
const heartbeatId = startHeartbeat('/heartbeat', 30000); // 30s