JS性能优化——防抖

什么是防抖

• 单位时间内，频繁触发事件，只执行最后一次
  使用场景：
• 搜索框搜索输入，只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测

为什么要防抖

如果代码中存在大量消耗性能的代码，比如 DOM 操作，比如数据处理，可能造成卡顿

例子

const box = document.querySelector('.box');
let i = 1
function mouseMove() {
    box.innerHTML = i++
}
box.addEventListener('mousemove',mouseMove)

上面的例子中通过监听鼠标在盒子中的滑动更改 i 的值，但是值更改的太快，我们想移动一次从开始到结束算一次，这样就不会太浪费性能。

防抖改进

const box = document.querySelector('.box')
let i = 1
        
function mouseMove() {
     box.innerHTML = i++
}
function debounce(fn, t) {
     let timer
     return function() {
     	 //每次鼠标移动都要判断是否定时器，有先清除
         if(timer) clearTimeout(timer)
         //没有则开启，存进定时变量
         timer = setTimeout(() => {
             fn()
         }, t)
     }
        
}
box.addEventListener('mousemove', debounce(mouseMove,500))

不管移动多少次，只执行最后一次

节流与防抖的区别

性能优化	说明	使用场景
防抖	单位时间内，频繁触发事件，只执行最后一次	搜索框搜索输入、手机号、邮箱验证输入检测
节流	单位时间内，频繁触发事件，只执行第一次	高频事件：鼠标移动 mousemove、页面尺寸缩放 resize、滚动条滚动 scroll 等等