防抖解析

先简单介绍一下debounce，从最简单的一个场景入手，当用户不断点击页面，短时间内频繁的触发点击事件，只有在用户触发事件后的ns时间内，没有再触发事件，真正的监听函数才会执行，如果在这段时间内再次触发了事件，就需要重新计算这个ns时间。

debounce最主要的作用是把多个触法事件的操作延迟到最后一次触法执行，在性能上做了一定的优化。

这幅图算是很形象地展示了debounce的作用。
正常，移动鼠标就会触发事件。我在左侧快速移动鼠标，regular没有对事件做任何防抖节流处理，移动一次就触发一次事件。而debounce只在我移动鼠标间隔超过200ms的时候才触发一次。
可以到这个可视化分析页面：添加链接描述实地感受下。
这在我们提交表单时非常有用。

实现debounce
debounce的核心实现，就是要判断每次触发事件的时候，是否要执行真正的func。

大体思路是每次触发事件都开启一个延时器，在延时器结束的时候对比最后一次触发事件时的时间差，如果时间差大于延迟的阈值，那么就执行真正的func。

大致结构如下：

function debounce (func, wait) {
    var lastCallTime   // 最后一次触法事件的时间
    var lastThis       // 作用域
    var lastArgs       // 参数
    var timerId        // 定时器对象
    wait = +wait || 0
    // 启动定时器
    function startTimer (timerExpired, wait) {
        return setTimeout(timerExpired, wait)
    }
    
    // func函数执行   
    function invokeFunc () {
    
    }
    
    // 调用func函数的判定条件 
    function shouldInvoke () {
    
    }
    
    //  定时器的回调函数 
    function timerExpired () {
        // 在这里判断触法事件的时间差
    }
    
    // 要返回的函数
    function debounced (...args) {
    
    }
    
    return debounced
}

debounced
每一次触发事件的时候都会进入到这个函数，这个函数需要做这么几个事情

• 确定作用域和参数
• 更新触法事件的时间，也就是lastCallTime
• 启动定时器 timerId

function debounced (...args) {
    const time = Date.now()
    lastThis = this
    lastArgs = args
    lastCallTime = time
    timerId = startTimer(timerExpired, wait)
}

再总结一下。每一次触法事件，都开启一个定时器timerId，并且会更新触法事件的最后时间lastCallTime，在定时器的回调函数里面，判断回调函数的执行时间与lastCallTime的时间差，如果大于阈值，说明延迟时间到了，func执行，如果小于，就忽略。

这其实只是实现了一个basicDebounce，其实有的时候我们需要在频繁触法事件的开始立即执行func，而忽略后面的触法事件，这就需要加入参数控制，也就是lodash中的trailing和leading，甚至两者同时存在，头尾各执行一次，还有就是throttle函数节流，保证在一段时间内func至少执行一次，这就是lodash中的maxWait参数。下一篇文章会完善这些功能，届时，一个完整的debounce才是真正的实现了。

throttle

简单地理解，debounce是将多个请求合并成一个事件。正常的debounce是触发操作的间隔大于设定的等待时间才会真正触发事件，但如果给maxWait设置了值，那么其实这就已经是一个throttle了。
throttle是指设定的时间内只触发一次事件。

requestAnimationFrame

它也是减少触发事件触发频率的一种解决方案。
可以看成_.throttle(dosomething, 16)，但准确性更好。它是浏览器的原生api，设计出来就是为了提供更高的准确性。
优点：
1.目标是60桢，但内部自己会决定渲染频率；
2.简单稳定，减少维护负担

缺点：
1.内部自己决定什么时候结束，不是手动取消；
2.浏览器选项卡不活动状态下，不会触发这个api。但scroll，鼠标和键盘事件不受影响；
3.不支持IE9, Opera Mini 和老版本的 Android，需要做polyfill.
4.不支持nodejs。

总结

1.debounce: 将多个快速触发的事件合并成一个响应事件。
throttle: 保证每隔一定时间会触发一次响应事件。例如每200ms检查滚动位置来触发一个css动画。
requestAnimationFrame: throttle的替代方案。当你需要重新计算或渲染屏幕上的元素的位置，保证平滑更改和动画（一般的应用场景就是这个）。