在vue中使用防抖函数
有时候我们不想频繁触发一个函数,比如在300ms内只能触发一次,就可以用防抖函数来处理
防抖函数的思想是:
设置定时器id为null
执行方法
判断id是否存在,如果不存在,则返回,如果存在则执行
同时设定一个定时器,在delay秒后设置定时器id为非null
这样如果你在delay秒内调用,那么在if判断里就直接返回了
除非你经过了delay秒
如下:
imgIndex: 1,
//防抖函数存储定时器id,有值则有正在进行的函数,返回return; 无值则放行
throttleId: null,
//防抖事件间隔=>小于300ms重复触发不执行
delay: 300
/**
*防抖函数,method待执行的函数,arg为该函数参数arguments
*/
throttle(method, arg) {
if (this.throttleId) {
return;
}
method(arg);
this.throttleId = setTimeout(() => {
this.throttleId = undefined;
}, this.delay);
}
//调用防抖函数,参数为要执行的函数
this.throttle(this.MouseWheel);