es6 class 封装定时器类的核心是统一管理 settimeout/setinterval 逻辑、状态(运行/暂停/销毁)及控制方法(启动/暂停/恢复/清除),避免全局污染和内存泄漏;通过私有字段保护 timerid,用递归 settimeout 实现精准暂停恢复,clear() 清空定时器并置空回调以切断闭包引用。

ES6 Class 封装定时器类的核心是把 setTimeout 和 setInterval 的逻辑、状态管理(如是否运行、是否已销毁)、以及控制方法(启动、暂停、恢复、清除)统一收口,避免全局变量污染和内存泄漏。
基础结构:定义类与关键属性
一个健壮的定时器类至少要记录:timerId(当前定时器 ID)、isRunning(运行状态)、isPaused(是否处于暂停)、callback(执行函数)、delay(延迟/间隔时间)以及可选的 repeat(是否循环)。构造时接收这些参数并初始化内部状态。
- 使用
Symbol或私有字段(如#timerId)保护内部 ID 更安全(若用私有字段需注意浏览器兼容性) - 默认不自动启动,由显式调用
start()控制,更符合封装原则 - 构造函数中不直接执行定时逻辑,只做初始化
支持单次与重复:统一处理逻辑
通过 repeat 参数区分一次性定时器(setTimeout)和重复定时器(setInterval),但对外暴露一致的 API。关键是:重复定时器在 pause() 时清除原 timer,并记录已过去的时间;恢复时用 setTimeout 补偿偏移,而非直接重启 setInterval,避免累积误差。
- 单次任务:调用
setTimeout,完成后自动置isRunning = false - 重复任务:用
setInterval,但pause()时保存剩余时间,resume()用setTimeout + setInterval组合实现精准恢复 - 也可全用
setTimeout递归实现重复逻辑,便于统一控制和暂停(推荐)
控制方法:启动、暂停、恢复、停止
每个方法需校验当前状态,防止误操作。例如:start() 只在未运行时生效;pause() 只对正在运行且未暂停的状态有效;clear() 必须清空 timer 并重置所有状态。
-
start():检查状态后启动,如果是重复任务,用递归setTimeout模拟setInterval -
pause():清除当前 timer,记录暂停时刻,设isPaused = true -
resume():仅当已暂停才生效,根据暂停时长补偿下次触发时间 -
clear():强制清除 timer,重置所有状态,确保实例可被垃圾回收
防误用与清理:避免内存泄漏
定时器未清除会导致闭包引用无法释放,尤其在回调中引用了外部大对象或 Vue/React 组件实例时。因此类中必须提供明确的销毁机制,并建议使用者在组件卸载或业务结束时主动调用 clear()。
- 在
clear()中将callback置为null,切断闭包引用 - 可增加
isDestroyed标志,拒绝所有后续操作,提升安全性 - 配合
AbortController(可选)实现更现代的取消语义,但需注意兼容性
不复杂但容易忽略。关键不在语法,而在状态边界和资源清理是否严谨。











