JS-防抖与节流

问题的由来：一些事件频繁的被触发而导致频繁的调用事件处理程序，从而造成程序不必要的开销，影响程序性能；防抖和节流就是为了解决这种情况造成的性能消耗。

场景1：使用keyup事件监听输入框的值进行请求搜索；此时我们只需要在用户输入搜索内容完成后再执行请求；此时使用 防抖

场景2：用户快速的时候点击切换轮播图的按钮；而我们需要轮播图是有规律的在间隔时间触发切换就好；此时使用 节流

相同点：

　　都是使用setTimeout来实现；

主要是区别：

　　防抖-debounce：触发某个事件规定n秒后执行事件处理程序，如果在这n秒内相同的事件被重复触发，则重新计算事件处理程序的执行时间点，即将多次触发合并为1次触发。

　　节流-throttle：     保证事件处理程序在大于等于预定周期时必定被执行1次，即以固定周期执行函数，从而降低执行次数。

防抖（debounce）

防抖：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有触发最后一次。

（说个题外话就是英雄联盟中 ctrl+1 我的盖伦会跳舞，如果我按住ctrl再快速不停的按1，那么盖伦就会一直处于抽搐状态，当我最后一次按1不再继续按 他才会完整的跳完一支舞；即执行这个跳舞事件）

使用场景有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

// 获取滚动条位置 防抖
var timer = null;
window.onscroll = function() {
    clearTimeout(timer);
    timer = setTimeout(function(){
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　        console.log('滚动条位置：' + scrollTop);
    },200)

};

//封装Debounce 参数 操作函数、时间间隔

//防抖函数封装
function bebounce(method,delay) {
　　var timer = null;
　　return function () {
　　　　let that = this, args = arguments;
　　　　clearTimeout(timer);
　　　　timer = setTimeout(function () {
　　　　　　method.apply(that,args) //当前this
　　　　},delay)
　　}
};
window.onscroll = bebounce(function() {
　　console.log('我拖动了滚动条');
},200)

 

VUE中使用防抖：

data: {
　　timeout2: null,
},
methods: {
　　submit() {
　　// clearTimeout(this.timeout2)  //方法一
　　// this.timeout2 = setTimeout(function(){console.log('点击')},600)  
　　　　this.debounce2(function(){console.log('点击')},600,"timeout2")     //方法二 抽离
　　},
　　debounce2(func, wait, obj) {
　　　　clearTimeout(this[obj])
　　　　this[obj] = setTimeout(func, wait) //返回计时器 ID
　　}
}

节流（throttle）

节流：保证事件处理程序在大于等于预定周期时必定被执行1次，即以固定周期执行函数，从而降低执行次数。

* 如果事件一直被触发，而我们实际上需要定时的执行事件处理程序，则去抖方式就不再合适，因为去抖只能保证执行连续触发事件的最后一次调用。

（继续，我鼠标快速的点击平A敌方防御塔，虽然我点的很快很快了，但是我的盖伦还是不慌不忙的一刀一刀有节奏的砍，这就是节流）

使用场景：

• 高频点击切换轮播图

// 获取滚动条位置 节流
var state =true; //首次进入能执行
var timer = null;
window.onscroll = function() {
    if (state) {
        state = false;
        clearTimeout(timer);
        timer = setTimeout(function(){ 
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            console.log('滚动条位置：' + scrollTop);
            state = true; 
        }, 500);
    }
}

//节流函数封装

function throttle(fun, delay) {
　　let last, deferTimer
　　return function (args) {
　　　　let that = this;
　　　　let _args = arguments;
　　　　let now = +new Date();
　　　　if (last && now < last + delay) {
　　　　　　clearTimeout(deferTimer)
　　　　　　deferTimer = setTimeout(function () {
　　　　　　last = now
　　　　　　fun.apply(that, _args)

　　　　　　}, delay)
　　　　}else {
　　　　　　last = now
　　　　　　fun.apply(that,_args)
　　　　}
　　}
};
window.onscroll = throttle(function() {
　　console.log('我拖动了滚动条');
},200)

 

总结：

• 函数防抖和函数节流都是防止某一时间频繁触发，但是这两者的原理稍有不同。
• 函数防抖是连续的触发只执行最后一次（盖伦跳舞），而函数节流是间隔时间执行（盖伦A塔）。