函数节流（throttle）和防抖（debounce）

函数节流

规定时间内只执行一次对应的事件
比如：
游戏中的技能冷却，在这个冷却时间内你是无法释放你的技能的，只有在冷却时间过了才可以重新释放技能

应用场景

• 游戏中的刷新率
• DOM元素拖拽
• Canvas画笔功能

节流初始都是从0秒开始的，也就是说当第一次触发事件的时候紧接着会执行

简易代码：

function fn(){}

var cd = false

button.onclick = function(){
       //如果在三秒内连续触发该事件，只有第一次是紧接着执行，之后不会再执行
    if(!cd){
        //紧接着执行fn
        fn()
        cd = true
        var timerId = setTimeout(()=>{
            cd = false
        },3000)
    }
}

封装

function throttle(fn,delay){
    var cd = false
    return ()=>{
        if(!cd){
            fn()
            cd = true
            var timer = setTimeout(()=>{
                cd = false
            },delay)
        }
    }
}

函数防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
比如：
如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

• 给按钮加函数防抖防止表单多次提交。
• 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
• 判断scroll是否滑到底部，滚动事件+函数防抖

防抖初始事件第一次触发的时候需要等到一段时间后才执行

var timerId = null
button.onclick = function(){
    if(timerId){
        window.clearTimeout(timerId)
    }
    //每次都重新定义计时器
    timerId = setTimeout(()=>{
        //一段时间后再执行fn
        fn()
        timerId = null
    },5000)
}

封装

function  debounce (fn, delay){
    var timer
    return ()=>{
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            fn()
        },delay)
    }
}