首先定义这样的一个节流函数
/**
* @effect 节流表示一段时间内只执行一次
* @author MasterYi
* @param {func} fn 需要执行方法
* @param {number} delay 毫秒,节流期限值
*/
export function Throttle(fn, delay){
let open = true;
return function(...data) {
if(!open){
//休息时间 暂不接客
return false
}
// 工作时间,执行函数并且在间隔期内把状态位设为无效
open = false
setTimeout(() => {
fn(...data)
open = true;
}, delay)
}
}
下图所示使用
throttleScroll: Throttle((top, scrollData, curIndex, scrollId, mapScroll, that) => {
mapScroll.forEach(v => {
v.fn(top, scrollData, curIndex, scrollId, that);
});
}, 100),
scroll(e) {
let top = e.target.scrollTop;
// 节流使用
this.throttleScroll(top, this.scrollData, this.curIndex, this.scrollId, this.mapScroll, this);
}