定时器和轮询都是前端小伙伴使用得比较频繁的功能,重复封装、改动都会浪费大量时间,不妨使用下面的一个实战骨架, 再进行自己个性化封装, 实现自己一劳永逸的定时和轮询。
// 定时器管理
class timerManage {
constructor() {}
// 设置定时器, 有timerKey, 则做去重处理
set(timerKey, timerId) {
if (this[timerKey]) {
this.clearTimer(timerKey);
}
this[timerKey] = timerId;
}
// 获取定时器id
get(timerKey) {
return this[timerKey];
}
// 获取当前实例
getAllTimer() {
return this;
}
// 清除定时器
clearTimer(timerKey) {
clearInterval(this[timerKey]);
delete this[timerKey];
}
// 清除所有定时器
clearAllTimer() {
Object.keys(this).forEach((item) => {
clearInterval(this[item]);
delete this[item];
});
}
}
// 创建定时器管理实例
const timerMg = new timerManage();
// 默认执行函数
const default_todoSomeThingFn = () => {
console.log("执行默认函数完毕!");
setTimeout(()=>console.log(Object.keys(timerMg.getAllTimer())))
return true;
};
// 轮询体
const roundQueryFn = (
todoSomeThingFn = default_todoSomeThingFn,
timerKey = ""
) => {
// 创建定时器
let timer = setInterval(todoFn, 100);
// 有传 timerKey
timerKey ? timerMg.set(timerKey, timer) : timerMg.set(timer, timer);
// 执行体
todoFn();
function todoFn() {
console.log(Object.keys(timerMg.getAllTimer()));
// 返回 ture 则 执行内容完毕, 结束轮询
const result = todoSomeThingFn();
if (result) {
timerKey ? timerMg.clearTimer(timerKey) : timerMg.clearTimer(timer);
}
}
};
module.exports = {
roundQueryFn,
};