节流和防抖

一. 是什么

本质上是优化高频率执行代码的一种手段

如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 throttle（防抖）和 debounce（节流）的方式来减少调用频率

二. 定义：

节流： n 秒内只执行一次若在 n 秒内重复触发只有一次生效
防抖： n 秒后再执行若在 n 秒内被重复触发则重新计时

一个经典的比喻: 想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应

假设电梯有两种运行策略 debounce 和 throttle，超时设定为 15 秒，不考虑容量限制

电梯第一个人进来后，15 秒后准时运送一次，这是节流

电梯第一个人进来后，等待 15 秒。如果过程中又有人进来，15 秒等待重新计时，直到 15 秒后开始运送，这是防抖

三、区别

相同点：

都可以通过使用 setTimeout 实现
目的都是，降低回调执行频率。节省计算资源

不同点：

函数防抖，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeout 实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次例如，都设置时间频率为 500ms，在 2 秒时间内，频繁触发函数，节流，每隔 500ms 就执行一次。防抖，则不管调动多少次方法，在 2s 后，只会执行一次

如下图所示：

四、代码实现

节流

function throttled(fn, delay) {
    let timer = null
    let starttime = Date.now()
    return function () {
        let curTime = Date.now() // 当前时间
        let remaining = delay - (curTime - starttime) // 从上一次到现在，还剩下多少多余时间
        let context = this
        let args = arguments
        timer && clearTimeout(timer)
        if (remaining <= 0) {
            fn.apply(context, args)
            starttime = Date.now()
        } else {
            timer = setTimeout(fn, remaining);
        }
    }
}

防抖

function debounce(func, wait, immediate) {

            let timeout;

            return function () {
                let context = this;
                let args = arguments;

                timeout && clearTimeout(timeout);
                if (immediate) {
                    let callNow = !timeout;
                    timeout = setTimeout(function () {
                        timeout = null;
                    }, wait)
                    if (callNow) {
                        func.apply(context, args)
                    }
                } else {
                    timeout = setTimeout(function () {
                        func.apply(context, args)
                    }, wait);
                }
            }
        }

五、应用场景

防抖在连续的事件, 只需触发一次的场景

搜索框输入搜素只需用户最后一次输入完发送请求
手机号等规则校验
窗口大小resize 只需窗口调整完成后计算窗口大小防止重复渲染

节流在间隔时间内只会执行一次

滚动加载加载更多或滚动到底部监听
搜索框搜索联想功能