JS--防抖和节流

防抖和节流都是为了减少高频事件回调函数的执行次数、提高性能。

1. 防抖函数

触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间。

  function debounce(fn, time) {
    // @fn{function} 需要防抖的函数
    // @time{number}毫秒,重置时间
    // @return{undefined}
    
    let timeout = null
    return function () {
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        fn.apply(this, arguments)
      }, time)
    }
  } 

2. 节流函数

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率.

  function throttle(fn, time) {
    // @fn{function}需要执行的函数
    // @time{number}函数执行最小间隔毫秒数
    // @return{undefined}

    let canRun = true
    return function () {
      if (!canRun) {
        return
      }
      canRun = false
      setTimeout(() => {
        fn.apply(this, arguments)
        canRun = true
      }, time)
    }
  }

3. 用法示例

function sayHi() {
    console.log('Hi')
  }

  // 页面上一个输入框，不论输入的频率如何，都只会在输入结束后 500 毫秒内没有再次输入的情况下打印结果
  document.getElementById("ipt").addEventListener("input", debounce(sayHi, 500))

  // 页面上一个输入框，输入事件触发后 1 秒内最多打印一次
  document.getElementById("ipt").addEventListener("input", throttle(sayHi, 1000))