函数节流与防抖

2017-10-20 本文已影响63人 _Dot912

函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
用的比较多的地方就是resize，scroll，用Ajax实现键盘输入自动填充。
实际上，我们并不需要那么频繁地触发这些事件函数，只要能确保比较流畅的用户体验即可。函数节流与防抖需要做的是忽略一些事件请求以降低触发回调的频率。
实现原理：设置状态锁实现节流，设置和清除定时器实现防抖

函数节流-Throttle：预先设定一个执行周期，每X毫秒去执行一次函数

function throttle(fn, interval) {
    var clock = true//clock是状态锁
    return function () {
        if (clock) {
            fn()
            clock = false
            setTimeout(function () {
                clock = true
            }, interval)
        }
    }
}

函数防抖-Debounce：当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间

function debounce(fn, wait) {
    var clock
    return function () {
        //每次都清掉前面设定的定时器
        clearTimeout(clock)
        clock = setTimeout(function () {
            fn()
        }, wait)
    }
}

以坐电梯为例：

函数节流：保证在第一个人进来后开始计时，电梯10秒后准时运行一次，不等待，如果没有人，则不运行

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

示意图

函数节流与防抖

猜你喜欢

热点阅读