防抖和节流

*本文参考
https://blog.csdn.net/hupian1989/article/details/80920324
&
https://blog.csdn.net/github_39132847/article/details/82984971

这里只是做一下复述，以便自己能够理解的更通透，原文图文并茂更宜理解*

场景

如鼠标移动事件onmousemove ,滚动事件onscroll，窗口大小改变onresize，输入框输入oninput。

结果

这些瞬间的操作都会导致这些事件被高频触发 ，如果响应事件逻辑稍微复杂点，会导致页面卡顿，假死等现象。

方案

防抖和节流是是针对响应跟不上触发频率的两种解决方案。

debounce 防抖（两次事件触发之间满足一定的空闲时间，响应动作才执行一次）

基本思想

设定一个延迟值，当事件触发时，如果是在延迟值内再次触发则重新设置延迟，只有在延迟时间结束才会执行响应动作，也就是如果在指定的周期内频繁触发事件，响应动作是不会频繁执行的，只有周期时间到了才会执行。

后期又扩展了前缘debounce，即执行动作在前，然后设定周期，周期内有事件被触发，不执行动作，且周期重新设定。

业务场景

A：百度搜索。一般搜索绑定输入事件（每次触发输入事件都会触发），如果触发一下就搜索一次，就会给服务器造成巨大压力。所以百度搜索利用防抖：当用户一直在输入的时候，比如说规定时间0.2秒，0.2秒内触发输入事件触发五次，那么这期间都不会触发远程搜索，当某一次输入后停顿满0.2秒才会去触发远程搜索。

B、地图加载：地图的加载是很缓慢的，一般只加载一定范围内的，然后等用户拖动地图到一个之前没加载的地方时，这个时候地图就该加载新的一部分。

代码

版本一：(缺陷：需要高频的创建定时器)

let debounce  = (fn, wait) => {
    let timer, timeStamp = 0
    let context, args

    let run  = () => {
        timer = setTimeout( () => {
        fn.apply(context, args)
        }, wait)
    }

    let clean = () => {
        clearTimeout(timer);
    }

    // 逻辑处理
    return function(){
        context = this
        args = arguments
        let now = (new Date()).getTime()

        if(now - timeStamp < wait) {
            // 在wait 值内 需要重置。先清除定时器，再重置wait值
            clean()
            run()
        } else {
            // 执行 fn（响应方法）
            run()
        }
  }
}

版本二：（对版本一的优化，逻辑判断放在定时器里）

周期内有新事件触发时，重置定时器开始时间戳，定时器执行时，判断开始时间戳，若开始时间戳被推后，重新设定延时定时器

let debounce = (fn, wait) => {
    let timer, startTimeStamp = 0
    let context, args
 
    let run = (timerInterval) => {
        //定时器执行时
        timer = setTimeout(() => {
            let now = (new Date()).getTime()
            let interval = now - startTimeStamp
            //开始时间戳被推后（即startTimeStamp被重新赋值会变大，所以interval会变小）
            if(interval < timerInterval){ 
                startTimeStamp = now
                //重新设定延时定时器
                run(timerInterval-interval) 
            }else{
                fn.apply(context,args)
                clearTimeout(timer)
                timer = null
            }
            
        }, timerInterval)
    }
 
    return function(){
        context = this
        args = arguments
        let now = (new Date()).getTime()
        //新事件触发时，重置定时器开始时间戳
        startTimeStamp = now
 
        if( !timer ){
            run(wait)
        }   
    }
}

版本三：（在版本二的基础上加上前缘debounce）

let debounce = (fn, wait, immediate=false) => {
    let timer, startTimeStamp = 0
    let context, args
 
    let run = (timerInterval) => {
        //定时器执行时
        timer = setTimeout(() => {
            let now = (new Date()).getTime()
            let interval = now - startTimeStamp
            //开始时间戳被推后（即startTimeStamp被重新赋值会变大，所以interval会变小）
            if(interval < timerInterval){ 
                startTimeStamp = now
                //重新设定延时定时器
                run(timerInterval-interval) 
            }else{
                if(!immediate){
                    fn.apply(context,args);
                }
                clearTimeout(timer)
                timer = null
            }
            
        }, timerInterval)
    }
 
    return function(){
        context = this
        args = arguments
        let now = (new Date()).getTime()
        //新事件触发时，重置定时器开始时间戳
        startTimeStamp = now
 
        if( !timer ){
            if(immediate) {
                fn.apply(context,args);
            }
            run(wait)
        }   
    }
}

throttling 节流（规定的时间内，多次触发事件，响应动作只执行一次）

业务场景

A、很多抢票、抢购这类操作很多都加了节流，为了避免用户大量点击造成服务器压力，当固定时间内，不论点击多少次，只执行一次抢的动作。

B、很多界面操作，会需要更新当前界面的数据，如果这类操作非常的高频，数据就可以采用节流的形式。

代码（考虑情况较简单，复杂情况可参考underscope 的_.throttle

）

let throttling = (fn, wait, immediate) => {
    let timer, timeStamp=0;
    let context, args;
 
    let run = () => {
        timer=setTimeout(()=>{
            if(!immediate){
                fn.apply(context,args);
            }
            clearTimeout(timer);
            timer=null;
        },wait);
    }
 
    return function () {
        context=this;
        args=arguments;
        if(!timer){
            console.log("throttle, set");
            if(immediate){
                fn.apply(context,args);
            }
            run();
        }else{
            console.log("throttle, ignore");
        }
    }

Lodash工具库里也有防抖节流的方法https://www.lodashjs.com/

debounce和throttling 各有特点，
在不同 的场景要根据需求合理的选择策略。
如果事件触发是高频但是有停顿时，可以选择debounce；
在事件连续不断高频触发时，只能选择throttling，
因为debounce可能会导致动作只被执行一次，界面出现跳跃。