JS防抖和节流

 一、防抖和节流的适用场景

• 防抖（Debounce）： 适合在输入框输入时的实时搜索、窗口大小调整时的resize事件等。
• 节流（Throttle）： 适合如页面滚动时的scroll事件、按钮点击时的请求发送等需要控制频率的场景。

二、防抖

解释：在设置的时间间隔内连续点击多次，只执行最后一次(时间间隔大于设置的时间)的点击。

例如：某个支付按钮，不加防抖函数，如果用户在一瞬间连续点击很多次，就可能会出现生成多个订单的情况。搜索框用户输入文字调用搜索接口等等等....

函数如下：设置连续两次点击的时间间隔为1秒。

data(){
return {
  clearId:null
  }
}

methods:{
    debounce() {
        // 两次点击的时间间隔小于1秒则清除定时器重新计时，否则就执行函数内部逻辑
        clearInterval(this.clearId)
        this.clearId = setTimeout(() => {
          // 发送请求 / 执行逻辑
          this.doAjax()
        }, 1000)
    }
}

 

三、节流

解释：控制函数的执行频率，使得函数在短时间内多次触发时，只执行一次或者以指定的频率执行。它可以有效地减少函数的执行次数，特别是在处理一些高频率触发的事件（比如浏览器的滚动事件、resize事件、input输入事件等）时非常有用，可以优化性能和用户体验，只允许在规定的时间内执行一次。

例如：浏览器的滚动事件、resize事件、input输入事件等高频率触发的事件，节流函数可以确保函数在一定时间间隔内最多执行一次，即使它在短时间内被频繁调用。

data () {
  return {
     timer: 0
  }
},
methods:{
    throttle() {
       // 创建一个时间戳赋值给timer 下次的时间戳减去上次的时间戳 间隔大于1s 才会去固定触发这个函数，只要小于1s永远不会触发
       const curClickTime = Date.now()
           if (curClickTime - this.timer > 1000) {
            this.doAjax()  //大于1s调用函数
        this.timer = curClickTime 
       } else {
             console.log('时间间隔小于一秒', curClickTime )
       } 
    }
}
      

 四、防抖和节流的区别

共同点： 都可以用来控制某个函数在短时间内被频繁调用时的执行次数，从而优化性能和避免不必要的计算或请求。

不同点 ：思路不同

  1. 防抖：某个时间内不能再次触发，一旦触发，就要重新计算

  2. 节流：限制相邻两次调用的时间间隔

总结：

防抖和节流都是为了优化性能而设计的方法，但在具体应用时需要根据不同的场景选择合适的方式。防抖更多用于避免短时间内频繁触发，节流则更多用于限制一定时间内的触发次数。