事件节流,简而言之就是防止事件被频繁触发;
不多说,上代码;
import DOM from '../methods/DOM';// 这是我之前单独写的一个绑定移除dom事件的方法;
class EventThrottle {
constructor() {
this.arr = []; // 保存所有绑定了事件节流的对象
}
// FN方法 duration时间,触发的最大频率 eventType动作(click或其他) eventTarget对象
add({ FN, duration, eventType, eventTarget }) {
let timer = null;
const symbol = Symbol(Date.now());
const hFN = (e) => {
if (!timer) {
FN(e);
timer = setTimeout(() => {
clearTimeout(timer);
timer = null;
}, duration);
}
};
const target = eventTarget || document;
const removeFN = DOM.ListenerFN({
target,
FN: hFN,
event: eventType,
});
this.arr.push({
removeFN,
symbol,
});
return symbol;
}
remove({ symbol }) {
this.arr.filter((item) => {
if (item.symbol !== symbol) {
return true;
}
item.removeFN();
return false;
});
}
}
const eventThrottle = new EventThrottle(); // 实例化
export default eventThrottle; // 返回实例化对象
在外部的话,引用后,通过add方法添加,remove方法来移除;
eventThrottle.add({ FN, duration, eventType, eventTarget }); // 会返回一个symbol
eventThrottle.remove({symbol});