「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」。

什么是防抖和节流？

在工作中经常会用到防抖和节流，尤其是在面试问题中，更是高频，几乎是必问

其实 函数防抖和节流 就是 优化 高频率执行 事件代码的一种手段

防抖（debounce）

字面意思，简单来说就是 防止抖动

原理

规定一个时间长度，在这个既定时间内的事件 只触发一次，那么这个事件在既定时间结束时才会执行一次，如果在 在既定时间结束之前，又一次触发了这个事件，那么间隔时间会重新计算，也就是说当用户一直触发这个函数，且每次触发间隔时间小于既定时间，那么这个事件只会执行最后一次

应用场景

搜索框搜索输入。只需用户最后一次输入完，再发送请求

手机号、邮箱验证输入检测

窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

实例代码

/*
* @param fn 执行事件方法
* @param wait 等待时间段
*/
function debounce(fn,wait){ 
    var timer = null 
    return function() { 
        if(timer){ 
            clearTimeout(timer) 
        } 
        timer = setTimeout(fn,wait) 
    } 
}

节流 （throttle）

字面意思，简单来说就是 节约流量

同样规定 一个时间长度，在这个既定时间内，事件无论触发多少次，到时间结束，只会触发一次

应用场景

上拉加载，加载更多或滚到底部监听

搜索引擎，搜索框，搜索联想功能

高频点击按钮，表单重复提交

实例代码

/*
* @param fn 执行事件方法
* @param delay 间隔时间
*/
function throttle(fn,delay){
    var lastTime = 0
    return function(){
        var nowTime = new Date().getTime()
        if(nowTime - lastTime > delay){
            fn.call(this)
            lastTime = nowTime
        }
    }
}  

非常感谢各位帅哥美女们能看到这里，如果这个文章写得还不错或者对你有一点点帮助，求点赞，求关注，求分享