js函数节流和防抖

常见场景：

1.如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？

2.如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？

为什么要使用函数防抖和函数节流？

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

函数防抖：（debounce）

函数防抖实现的核心在于每次都去clear一个延时器，然后每次执行函数的时候，都去clear以前的延时器。只有当你中断输入的时候，才会去执行相应回调。

（当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间）

生活中的声控灯，只要你不停的说话，灯就不会熄灭，只有你安静的时间大于一定的值时，灯才会熄灭。

常见应用场景：

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

function _debounce(fn,wait){
    var timer = null;
    return function(){
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn()
        },wait)
    }
}

function _log(){
    console.log(1)
}
window.onscroll = _debounce(_log,500)

函数节流：（throttle）

函数节流的核心是去判断当前时间和开始时间的间隔是否到达了设置的delay值，如果达到了，就执行一次回调。没有则不执行。

用一个形象的比喻吧。生产线上的啤酒瓶排成队往前跑，一个行动迟缓的树懒，每一段时间内只能拿到一个瓶子。

常见应用场景：

window.onresize调整窗口
DOM元素拖拽事件mousemove
Canvas画笔功能
游戏中的刷新率

总的来说，适合大量事件按时间做平均分配触发。

如果页面很长，我们一直在滚动页面，那_log方法就一直不会被执行。所以我们可以升级一下上述的防抖方法。
function _throttle(fn,wait,time){
    var previous = null; //记录上一次运行的时间
    var timer = null;

    return function(){
        var now = +new Date();

        if(!previous) previous = now;
        //当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话，就主动执行一次
        if(now - previous > time){
            clearTimeout(timer);
            fn();
            previous = now;// 执行函数后，马上记录当前时间
        }else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn();
            },wait);
        }
    }
}
function _log(){
    console.log(1)
}
window.onscroll = _debounce(_log,500,2000)

最佳实践：

把函数节流和函数防抖封装在了一个函数里，通过第三个参数切换模式。

        const throttle = function (fn, delay, isDebounce) {
            let timer=null
            let lastCall = 0
            return function (...args) {
                if (isDebounce) {
                    if (timer) clearTimeout(timer)
                    timer = setTimeout(() => {
                        fn(...args)
                    }, delay)
                } else {
                    const now = new Date().getTime()
                    if (now - lastCall < delay) return
                    lastCall = now
                    fn(...args)
                }
            }
        }
        window.onresize = throttle(function () { console.log(1) }, 2000, false)

参考文章：
https://segmentfault.com/a/1190000009675191
https://segmentfault.com/a/1190000008768202
https://mp.weixin.qq.com/s/3FZJ0nQLhj9PCi0pfBjc9A