JS的防抖与节流 -- springboot实战电商项目mall4j

Posted 2021-09-14 mall4j

JS的防抖与节流

springboot实战电商项目mall4j （https://gitee.com/gz-yami/mall4j）

什么是防抖？

函数防抖(debounce)： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

什么是节流

函数节流(throttle): 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

应用场景

对于函数防抖，有以下几种应用场景：

• 给按钮加函数防抖防止表单多次提交。
• 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。

总的来说，适合多次事件一次响应的情况

对于函数节流，有如下几个场景：

• 游戏中的刷新率
• DOM元素拖拽
• Canvas画笔功能

总的来说，适合大量事件按时间做平均分配触发。

函数防抖

function debounce (fn, wait) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn(...args)
    }, wait)
  }

函数节流

function throttle (fn, wait) {
  let timer
  return (...args) => {
    if (timer) { return }
    timer = setTimeout(() => {
      fn(...args)
      timer = null
    }, wait)
  }

小结

• 防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout
• 节流：控制流量，单位时间内事件只能触发一次，代码实现重在开锁关锁 timer=timeout; timer=null

springboot实战电商项目mall4j （https://gitee.com/gz-yami/mall4j）