彻底弄懂函数防抖和函数节流

函数防抖和节流

函数防抖和函数节流：是优化高频率执行的JavaScript代码的一种手段。常用于JavaScript中的一些事件，如浏览器的resize、scroll，鼠标的mousemove、mouseover，键盘的keypress等。例如input输入框的keypress事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，就需要对这类事件进行调用次数的限制。

函数防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

原始版本：

let timer // 定时器标志
// 为了方便，使用滚动事件作为代码范例
document.body.onscroll = function () {
    if(timer){
        // 如果定时器存则清除定时器
        clearTimeout(timer);
    }
    // 重新设置定时器
    timer = setTimeout(function () {
        console.log("执行任务了")
    }, delay);
}

封装版本：

function debounce(fn, delay) {
    let _this = this //防止this的指向改变先存起来
    let timer
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this,arguments)
        }, delay);
    }
}

函数节流

每隔一段时间，只执行一次函数。

原始版本：

let gapTime = delay//规定最小时间间隔
let lastTime //定义记录最后时间的变量
let nowTime //定义记录开始时间的变量
let fn = () => console.log('我执行了')
document.body.onscroll = () => {
    nowTime = Date.now() //获取当前时间
    //如果lastTime存在，并且时间间隔大于最小时间才会执行右边的逻辑
    if (!lastTime || nowTime - lastTime > gapTime) {
        fn()
        lastTime = nowTime
    }
})

封装版本：

function throttle(fn, gapTime) {
    let lastTime
    let nowTime
    return function (){
        nowTime = Date.now()
        if (!lastTime || nowTime - lastTime > gapTime) {
            fn()
            lastTime = nowTime
        }
    }
}

常见应用场景

函数防抖的应用场景

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

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

函数节流的应用场景

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

• 滚动加载，加载更多或滚到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交

本文只是为了弄清楚函数防抖和函数节流的原理，所以只介绍了最原始的实现方法，你也可以根据需求对原始版本进一步改进、封装，从而运用到生产环境中。