防抖和节流

什么是抖？

鼠标和键盘等事件会频繁触发，比如mousemove事件，当鼠标滑动的时候就会触发事件，并运行事件里的运算。这样会消耗大量性能。

怎么防抖？

使用定时器setTimeout，异步调用mousemove事件，当鼠标停止滑动的时候才触发mousemove事件

function handle({clientX,clientY}){
    document.body.innerHTML = `X:${clientX},Y:${clientY}`
}
document.addEventListener('mousemove', handle)

上面的代码只要鼠标滑动，事件就会触发，下面展示防抖代码

function debounce(fn,time){
    let timer;
    return function(event){
        clearTimeout(timer);//事件触发时先清除定时器
        document.body.innerHTML = "鼠标停止滑动显示效果";
        timer = setTimeout(() => {
            fn(event)
        }, time)
    }
}
document.addEvevtListener('mousemove', debounce(handle,500);

当鼠标停止滑动后，才绑定异步函数，触发mousemove事件

节流

节流就像是一个有定时器的阀门，在这个事件段内无论怎么操作阀门都不会打开，但，只要时间一到就打开阀门，然后重新开始。鼠标滑动过程中事件会一直触发，使用定时器，使事件按设定的频率触发，而不是一直触发。

节流代码

function throttle(fn,time){
    var begin = new Date();
    return function(event){
        // fn作为回调函数，this不会指向调用事件的对象
        // 这里需要使用call改变this的指向
        let that = this
        // 也有可能传入参数，所以也需要传入参数
        let args = arguments
        if(new Date() - begin < time){
            return;
        }
        fn.apply(that, args);
        begin = new Date();
    }
}
document.addEventListener('mousemove', throttle(handle, 500));

防抖和节流的区别

防抖:鼠标滑动停止过才触发事件
节流:鼠标滑动过程中，按设定的频率触发事件，达到节省性能的目的。

关键字

定时器，高阶函数，this指向