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. 节流：限制相邻两次调用的时间间隔

总结：

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