介绍
- 为什么会有这个方案:仅仅为了让定时器集中控制,全局有且只有一个定时器。
- 如果页面里面有多个定时器的时候可以用以下方案去优化
- 如果不想在全局挂载一个无限执行的,只需要自定义开关以下方法。
实现
- ts版本
type AnyFn = (...arg: any) => any;
type HandleTimeParams = AnyFn | [AnyFn, number]
class HandleTime {
private number: number = 0;
private timer: any = null;
private eventList: HandleTimeParams[] = [];
install() {
if (this.timer) return;
this.timer = setInterval(() => {
this.number++;
this.eventList.forEach((content: HandleTimeParams) => {
if (typeof content === 'function') content?.()
else {
const [fn, nb] = content;
this.number % nb === 0 && fn?.();
}
})
}, 1000)
}
addEvent(event: HandleTimeParams) {
this.eventList.push(event)
}
deleteEvent(event: HandleTimeParams) {
const i = this.eventList.findIndex((v: HandleTimeParams) => event === v);
this.eventList.splice(i, 1)
}
}
export const TimeInterval = new HandleTime();
TimeInterval.install();
- js 版本
class HandleTime {
private number = 0;
private timer = null;
private eventList = [];
install() {
if (this.timer) return;
this.timer = setInterval(() => {
this.number++;
this.eventList.forEach((content) => {
if (typeof content === 'function') content?.()
else {
const [fn, nb] = content;
this.number % nb === 0 && fn?.();
}
})
}, 1000)
}
addEvent(event) {
this.eventList.push(event)
}
deleteEvent(event) {
const i = this.eventList.findIndex((v) => event === v);
this.eventList.splice(i, 1)
}
}
export const TimeInterval = new HandleTime();
TimeInterval.install();
使用
import { TimeInterval } from '@/utils'
const fn = () => {console.log('1s执行一次')}
TimeInterval.addEvent(fn)
const arrFn = [() => {console.log('3s执行一次')}, 3];
TimeInterval.addEvent(arrFn)
const arrFn10 = [() => {console.log('10s执行一次')}, 10];
TimeInterval.addEvent(arrFn10)
setTimeout(() => {
TimeInterval.deleteEvent(fn)
TimeInterval.deleteEvent(arrFn)
}, 5)
注意事项
- 如果挂载的事件执行完毕了一定要卸载它(调用
deleteEvent
方法)避免全局调用无效事件 - 挂载是非常简单的,卸载也是非常简单的!但是如果不注意卸载会导致内存泄漏!!!