递归 setTimeout 实现周期任务更灵活可控，避免 setInterval 的堆积问题；其核心是每次任务执行完再设下一次定时，天然串行防堆积、可中断，支持动态间隔、错误退避及暂停恢复等增强能力。
用递归 setTimeout 实现周期任务，核心在于“手动控制每次执行的时机”，避免 setInterval 的累积误差、无法动态调整间隔、以及任务未完成就触发下一次等隐患。它更灵活、更可控，适合对精度、响应性或生命周期有要求的场景。
为什么不用 setInterval？
setInterval 是固定时间片轮询，不关心前一次任务是否结束。如果任务执行耗时超过设定间隔，就会出现“堆积”——多个任务并发或排队，可能拖慢页面、消耗资源，甚至导致逻辑错乱。而递归 setTimeout 是“上一次执行完，再决定下一次何时开始”，天然具备串行、防堆积、可中断的特性。
基础结构：保证串行与可控启动
一个最小可用的递归定时器长这样：
let timerId = null;
const start = () => {
const task = () => {
// ✅ 实际业务逻辑（如轮询接口、动画帧更新、状态检查）
console.log('执行中…');
<pre class='brush:php;toolbar:false;'>// ✅ 执行完毕后，再安排下一次
timerId = setTimeout(task, 1000);}; timerId = setTimeout(task, 1000); };
const stop = () => { if (timerId) { clearTimeout(timerId); timerId = null; } };
- 每次
setTimeout只设一次，回调里再调自己，形成“链式调用” - 暴露
start/stop方法，便于外部控制生命周期 - 用
timerId缓存当前定时器句柄，确保可取消
增强能力：支持动态间隔与任务反馈
真实业务中，间隔常需根据条件变化（比如失败后退避重试、空闲时拉长间隔），且任务本身可能异步（如 fetch）。这时需让任务返回一个“承诺”，再基于结果决定下次延迟：
const createRecurringTask = (fn, initialDelay = 1000) => {
let timerId = null;
<p>const run = async (delay = initialDelay) => {
try {
await fn(); // ✅ 等待任务完成（同步或 Promise）
timerId = setTimeout(() => run(delay), delay);
} catch (err) {
// ✅ 出错可降级重试（如指数退避）
const nextDelay = Math.min(delay * 2, 30000); // 最长30秒
timerId = setTimeout(() => run(nextDelay), nextDelay);
}
};</p><p>return {
start: (delay = initialDelay) => run(delay),
stop: () => {
if (timerId) clearTimeout(timerId);
timerId = null;
}
};
};</p><p>// 使用示例
const task = createRecurringTask(
() => fetch('/api/status').then(r => r.json()),
5000
);
task.start();</p>- 任务函数
fn支持返回 Promise，await确保真正“执行完”才计时 - 每次调用
run()可传入新delay，实现运行时动态调整 - 错误处理内置退避策略，避免高频失败冲击服务
进阶实践：节流、暂停恢复与上下文绑定
复杂场景还需考虑：任务执行期间用户切换标签页、需要临时暂停、或多次调用时避免重复启动：
-
可见性感知：监听
document.visibilityState，隐藏时自动stop，显示后按剩余时间或立即start -
暂停/恢复：用布尔标记
isPaused，在run中跳过调度，恢复时重新setTimeout -
防重复启动：
start()内先stop()再启动，或加if (timerId) return守卫 -
绑定 this 或参数：用箭头函数或
bind包装任务，避免上下文丢失
递归 setTimeout 不是银弹，但它把控制权交还给开发者。只要守住“执行完再定下一次”的原则，就能构建出健壮、可预测、易调试的周期行为。
