JS防抖(debounce)和节流(throttle)

1. 是什么

本质是优化高频率执行代码的手段，好比 scroll keypress mousemove等事件。

定义

防抖(debounce):在事件被触发n秒后在执行回调，若是在这n秒内又被触发，测从新计时。

节流(throttle):在规定的时间间隔内，只触发一次回调函数，若是规定时间内触发屡次函数，只有一次生效。

2. 代码实现

防抖：

function debounce(func, wait) {
    let timeout;

    return function () {
        let context = this; // 保存this指向
        let args = arguments; // 拿到event对象

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}
复制代码

节流：时间戳和定时器结合使用

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
        clearTimeout(timer)
        if (remaining <= 0) {
            fn.apply(context, args)
            starttime = Date.now()
        } else {
            timer = setTimeout(fn, remaining);
        }
    }
}
复制代码

区别

-相同点

下降回调执行频率。节省计算资源

均可以使用setTimeout

-不一样点

- 函数防抖，在一段连续操做结束后，处理回调，利用clearTimeout 和 setTimeout实现。函数节流，在一段连续操做中，每一段时间只执行一次，频率较高的事件中使用来提升性能

- 函数防抖关注必定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次