最近在用vuejs来做一个H5的云盘项目,其中需要防止用户在手机上,快速的点击而引发的重复请求接口导致数据出现重复的情况,所以这个时候就需要用到函数防抖了;
下面来说一下什么是函数防抖:
函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。例如我们平时坐公交车,在一定的时间内,不允许重复刷卡,得过了某个设定的时间后,才能去重新刷卡是一个道理的。
下面看具体的实现
export function _debounce(fn, delay) {//防抖
var delay = delay || 200;//不传默认为200毫秒
var timer;
return function () {
var th = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delay);
};
}