一、基本概念
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时,计时结束执行回调。(通俗来说就是当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新计时,计时结束执行回调)。
函数防抖的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,知道函数请求停止并超过时间间隔才会执行。
二、使用
1、直接使用
const debounce = (function() {
let timer = 0;
return function(callback, ms = 200) { //设置默认200ms
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
export default {
methods: {
setNavLeft() {
debounce(async () => {
let navleft =
parseInt(this.$refs.navr.getBoundingClientRect().left) + 846 + "px";
this.$refs.navdiv.style.left = navleft;
}, 100);
},
}
}
2、封装为公用方法
第一步,在utils文件夹下建立index.js文件
// index.js
export default {
debounce(fn, delay = 300) { //默认300毫秒
let timer;
return function () {
let args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, args); // this 指向vue
}, delay);
};
}
}
第二步,组件内引入该js
import publicFn from '@/utils/index'
第三步,组件的methods方法进行调用
methods: {
//开始调用
moveOver: publicFn.debounce(function () {
++this.count;
console.log(this.count)
}, 200),
}