js里面的防抖动，就是当一个函数不断被触发，但是实际有效值是最后一次的时候，为了节省资源，提高性能，让这个函数只触发最后一次。
比如常见的resize事件，scroll事件，非常典型的一个重复触发，有效的是最后一次。
那么怎么做呢？
function debounce(fn, delay) {
// 维护一个 timer
let timer = null;
return function() {
// 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
let context = this;
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
}
}
这个就是一个防抖动函数的封装。
使用时：
function test() {
console.log("触发了")
}
window.addEventListener("scroll", test, false);
这是一般情况我们使用，暂时还没有使用防抖动，多以test会在一次滚动事件里，触发很多次。
使用防抖动：
function test() {
console.log("触发了")
}
const test2 = debounce(test,100);
window.addEventListener("scroll", test2, false);
这样写，在一次事件中我们只会触发一次。
注意：
必须对防抖动函数创建一个变量保存，并且要先运行防抖动函数，拿到防抖动函数返回的匿名函数。
_变量保存_：用于事件清除，匿名函数无法被清除
_先运行_：不运行等于每次都是新的匿名函数，防抖动无效
vue里面使用
vue里面使用除了像上面那边，用一个变量保存，还可以这样：
<script>
export default {
methods:{
//防抖动函数
debounce(fn, delay) {
// 维护一个 timer
let timer = null;
return function() {
// 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
let context = this;
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
}
},
test(){
console.log("运行了");
}
},
created() {
//防抖动
this.test= this.debounce(this.test, 100);
},
mounted(){
window.addEventListener("scroll", this.test, false);
}
}
</script>
我们可以在创建的时候对test方法复写一次，这样就省去创建一次变量了。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。
