函数节流与防抖

前面的话

在一些场景中，函数有可能被非常频繁地调用，而造成很大的性能问题。解决性能问题的处理办法就是函数节流与函数防抖。（也是高阶函数的一种应用）

常用场景

函数被频繁调用的常见的几个场景

1: mousemove事件。如果实现一个拖拽功能，就要一直监听mousemove事件，在回调函数中一直获取元素当前的位置，然后重置DOM元素的位置，引发的浏览器的重排会重绘，性能差的浏览器可能 会直接崩溃。

2： window.onresize事件。当浏览器窗口被拖动而改变，这个事件触发的频率也很高。如果在window.onresize事件函数里有DOM节点相关的操作，是很消耗性能的，这时浏览器就可能有点吃不消。

3：监听滚动事件scroll事件，比如到页面底部是否自加载。

4：keyup事件、mousedown事件等

这些场景的解决方法就是函数节流与函数防抖

函数节流

指某个函数在一定时间间隔内只执行一次，在这段时间间隔内无视其他函数的调用请求。

实现方案有两种：

• 时间戳：用时间戳来判断是否已经到执行时间，记录上次执行的时间戳，然后每次触发事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达时间差(等待时间)，如果是则执行，并更新当前时间为上一次执行的时间戳。
• 定时器：使用定时器来触发回调，比如设置一个1000ms的定时器，每次触发scroll事件就会触发回调函数，如果已经存在定时器，则回调不执行，直到存在的定时器被清除，重新设置新的定时器

分别用两种方法实现： 使用setInterval模拟频繁调用

[时间戳]

 const throttle = function (fn, waitTime) {// fn 需要执行的函数，waitTime时间间隔      
     let previous = 0;     
     return function (...args) {
         let now = +new Date();// 获取当前时间，单位毫秒
         if(now - previous > waitTime) {// 当时间差大于时间间隔
             previous = now;// 更新上一次的时间戳
             fn.apply(this, arguments);// 使用apply确保this指向
        }
     }
 }
function resizeDiv() {
     let div = document.getElementById('myDiv');
     div.style.left = div.offsetLeft  + 5  + 'px';
    console.log(666);
}
setInterval( throttle(resizeDiv, 2000),10);

[定时器]

const throttle = function (fn, waitTime) {// fn 需要执行的函数，waitTime时间间隔      
    let timer = null;
    return function (...args) {
       if(!timer){ // 当定时器不存在时
        timer = setTimeout( function () {
            fn.apply(this, arguments);
            clearTimeout(timer);
            timer = null;
        }, waitTime);

       }
    }
}
 setInterval( throttle(resizeDiv, 2000),10);

函数防抖

若干个函数调用合成 一次，并在给定时间过去之后回调函数仅执行一次。 简单讲，就像搭公交。10S没人上车就会关门，这时候每5S来一个人，车门关门就会延时到10s后，一直来人就会一直开着。到最后没人了才会关门，且只会关一次。

实现原理：利用定时器，函数第一次执行时设置一个定时器，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设置一个新的定时器，如果存在没有被清空的定时器，当定时器结束后触发函数执行。

 function debounce(fn, waitTime, immediate) {
     let timer = null;
     return function (...args) {
         if(timer)// 存在定时器，就清除定时器
         clearTimeout(timer);

        // immediate为true表示第一次出发回调立即执行
         if(immediate && !timer) {
             fn.apply(this, arguments);
         }
         // 重新设置定时器
         timer = setTimeout(() => {
             fn.apply(this, arguments);
         }, waitTime);
     }
 }

 
const betterFn = debounce(() => console.log('fn 防抖执行了'), 1000, true)
// 第一次触发 scroll 执行一次 fn，后续只有在停止滑动 1 秒后才执行函数 fn，如果一直滑动，
// 回调函数一直不执行，只有停止滑动后1秒，回调才执行
document.addEventListener('scroll', betterFn)

[加强版节流]

现在考虑一种情况，如果用户的操作非常频繁，不等设置的延迟时间结束就进行下次操作，会频繁的清除计时器并重新生成，所以函数 fn 一直都没办法执行，导致用户操作迟迟得不到响应。

有一种思想是将「节流」和「防抖」合二为一，变成加强版的节流函数，关键点在于「 wait 时间内，可以重新生成定时器，但只要 wait 的时间到了，必须给用户一个响应」.

新增逻辑在于当前触发时间和上次触发的时间差小于时间间隔时，设定一个新的定时器，相当于把的bounce代码放在了小于时间间隔部分

function throttle(fn, waitTime) {
        // previous是上一次执行fn的时间，timer是定时器
        let previous = 0, timer = null;
        return function (...args) {
            let now = +new Date() ;// 获取当前时间
            // 新增部分
            if(now - previous < waitTime) { // 时间差小于时间间隔
                // 为本次触发操作设置一个新的定时器
                // 定时器结束后执行fn
                if(timer) clearTimeout(timer);
                timer = setTimeout(() => {
                    previous = now;
                    fn.apply(this, arguments);
                }, waitTime);
                // 新增部分结束
            } else {
                previous = now;
                fn.apply(this, arguments);
            }
        }

    }
    const betterFn = throttle(() => console.log('fn 节流执行了'), 1000)
// 第一次触发 scroll 执行一次 fn， 每隔1秒执行一次函数fn,停止滑动1秒再执行函数fn 
    document.addEventListener('scroll', betterFn) 

参考：深入浅出防抖函数