首页 > > 网页制作 > Javascript >

函数防抖与节流你知多少

2019-04-26 08:21:38来源：博客园阅读 ()

它们都是为了解决事件的频繁触发而出现的

不同之处：

防抖：当事件频繁触发时不执行事件处理函数，

　　　　只有空闲下来的时候才会执行事件处理函数，

　　　　（比如一个搜素场景，当用户正在输入的时候不触发搜索

　　　　　只有当用户停止输入时才发起搜索请求）。

节流：当事件频繁触发时规定一定时间内只触发一次事件处理函数，

　　　比如规定3秒内，无论事件触发了多少次，事件处理函数只执行一次

　　　　（比如一个抢购场景，先到先得，普通用户疯狂点击抢购按钮抢购，

　　　　　外挂用户使用脚本一秒钟抢1000次，这时候加上节流，规定一秒钟只能

　　　　　　抢一次，这样就保证了公平性）

先看一下一个滚动不加防抖和节流的效果：

const scrollSection = document.getElementsByClassName('scroll-section')[0];

scrollSection.addEventListener('scroll',callback, false);
function callback() {
    console.log('滚动')
}

使用节流：

const scrollSection = document.getElementsByClassName('scroll-section')[0];

scrollSection.addEventListener('scroll',callback, false);

let canPlay = true;

function callback() {
    if (!canPlay) {
        return
    }
    canPlay = false;
    setTimeout(() => {
        console.log('节流');
        canPlay = true;
    }, 2000)
}

通过一个开关来控制是否打印， 2秒内无论滚动多少次，

由于开关是false，所以都不会触发事件处理函数，只有2秒后，

开关变成true才触发，我们把它封装成一个函数throttle

const scrollSection = document.getElementsByClassName('scroll-section')[0];
const params = ['节流'];
scrollSection.addEventListener('scroll',throttle(callback,2000,...params), false);

function callback(str) {
    console.log(str);
}
// 节流函数
function throttle(cb,wait) {
    let canPlay = true;
    // 截取传递过来的参数
    const args = [].slice.call(arguments, 2);
    // 保存函数上下文对象
    const self = this;
    return function () {
        if (!canPlay) {
            return
        }
        canPlay = false;
        setTimeout(() => {
            cb.apply(self, args);
            canPlay = true;
        }, wait)
    }
}

我们只需要把要做节流的回调函数,等待的时间和回调函数的参数传入throttle中即可，

效果和上面一样。

还有一种方法：

function throttle1(cb, wait) {
    let preTime = 0;
    // 截取传递过来的参数
    const args = [].slice.call(arguments, 2);
    // 保存函数上下文对象
    const self = this;
    return function () {
        const lastTime = new Date().getTime();
        if (lastTime - preTime < wait) {
            return
        }
        cb.apply(self, args);
        preTime = lastTime;
    }
}

每次比较一下当前时间和上一次保存的时间，只有

两者的差值大于wait的时候才会触发回调函数，这种方法和上一种方法的

唯一区别就是这种方法一进去就触发了一次，

两种方法根据需求来选择了，

如果要延迟触发就选第一种，

如果要立即触发一次就选第二种。

使用防抖：

const scrollSection = document.getElementsByClassName('scroll-section')[0];
const params = ['防抖'];
scrollSection.addEventListener('scroll',deBounce(callback,2000,...params), false);

function callback(str) {
    console.log(str);
}
// 防抖函数
function deBounce(cb, wait) {
    let timer = null;
    // 截取传递过来的参数
    const args = [].slice.call(arguments, 2);
    // 保存函数上下文对象
    const self = this;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            cb.apply(self, args);
        }, wait)
    }
}