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)

05-28 21:46