前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明

防抖和节流是两种常用的优化高频率执行代码的技术，它们的目的都是为了减少事件触发时的计算资源浪费。

防抖(debounce)

在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：
如果在200ms内没有再次触发滚动事件，那么就执行函数
如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时
效果：如果短时间内大量触发同一事件，只会执行一次函数。

代码实现

function debounce(fn, delay) {
    let timer = null //借助闭包
    return function () {
        if (timer) {
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
        }
        timer = setTimeout(fn, delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
    }
}

监听浏览器滚动事件，返回当前滚条与顶部的距离

function showTop() {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
}

对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。

 window.onscroll = debounce(showTop, 1000)

节流(throttle)

类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活
效果：如果一直拖着滚动条进行滚动，那么会以1s的时间间隔，持续输出当前位置和顶部的距离

代码实现

function throttle(fn, delay) {
    let valid = true
    return function () {
        if (!valid) {
            //休息时间 暂不接客
            return false
        }
        // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

监听浏览器滚动事件，返回当前滚条与顶部的距离

function showTop() {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
}

如果一直拖着滚动条进行滚动，那么会以1s的时间间隔，持续输出当前位置和顶部的距离

window.onscroll = throttle(showTop, 1000)

应用场景

防抖在连续的事件，只需触发一次回调的场景有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

节流在间隔一段时间执行一次回调的场景有：

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

总结

• 防抖就像王者里的英雄回城，点一下回城，会倒计时，如果中途被打断，则会重新开始。
• 节流就像王者里的大招，点一下大招释放完，会倒计时，中途不受任何影响，倒计时结束，大招接着使用。