可以用 setTimeout 递归调用模拟 setInterval，核心是回调中再次调用 setTimeout 形成链式执行，并返回清除函数；需处理 this 绑定、参数传递、错误捕获及状态管理以提升健壮性。
可以用 setTimeout 递归调用自身来模拟 setInterval 的行为，关键在于每次定时器触发后，重新设置下一次延迟执行，同时注意清理机制和执行时机控制。
基本实现方式
核心思路是：在回调函数内部再次调用 setTimeout，形成链式调用，从而实现周期性执行。
- 每次执行完任务后，立即安排下一次执行，间隔时间与预期周期一致
- 返回一个类似
clearInterval的取消函数，用于手动停止定时器 - 避免使用闭包变量保存定时器 ID 时出现作用域污染或误清除
示例代码：
function mySetInterval(fn, delay) {
let timerId = null;
function run() {
fn();
timerId = setTimeout(run, delay);
}
timerId = setTimeout(run, delay);
return function clear() {
if (timerId !== null) {
clearTimeout(timerId);
timerId = null;
}
};
}
// 使用
const cancel = mySetInterval(() => console.log('tick'), 1000);
// 取消
// cancel();
处理 this 和参数传递
原生 setInterval 支持传入额外参数，且能正确绑定 this。模拟时需兼容这些能力。
立即学习“Java免费学习笔记（深入）”；
- 使用
fn.call(thisArg, ...args)保证上下文和参数正确传递 - 把
thisArg和后续参数提取出来，避免在递归中丢失 - 推荐用剩余参数（
...args）接收所有传入参数
增强版示例：
function mySetInterval(fn, delay, ...args) {
let timerId = null;
const thisArg = this;
function run() {
fn.apply(thisArg, args);
timerId = setTimeout(run, delay);
}
timerId = setTimeout(run, delay);
return function clear() {
if (timerId) {
clearTimeout(timerId);
timerId = null;
}
};
}
与原生 setInterval 的差异点
手动模拟无法完全等价，需注意几个实际影响行为的细节：
-
执行时机不严格：原生
setInterval在理想情况下保持固定间隔，而递归setTimeout的间隔是从上一次执行结束开始计算，若任务耗时较长，会导致整体节奏变慢 -
无重复累积风险：原生
setInterval在页面失焦时可能积压多个未执行任务（尤其低版本浏览器），而setTimeout链天然避免该问题 -
无法获取定时器编号：返回的是控制函数，不是数字 ID，不能直接传给
clearTimeout
更健壮的封装建议
生产环境建议增加错误防护和状态管理：
- 在
run中加try...catch，防止任务异常中断整个定时链 - 添加运行状态标识（如
isActive），避免重复启动或重复清除 - 支持暂停/恢复功能可基于是否重设
setTimeout实现
不复杂但容易忽略细节，关键是把“执行 → 延迟 → 再执行”这个闭环做稳，并留好出口。
