防抖debounce和节流throttle函数

一、防抖（debounce）

• 防抖：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

/**
 *
 * @param fn 执行函数
 * @param wait 防抖时间,毫秒
 * 
 */
export const debounce = function(fn, wait) {
  let timeout = null
  return function() {
    if (timeout !== null) clearTimeout(timeout)// 如果多次触发将上次记录延迟清除掉
    timeout = setTimeout(() => {
      fn.apply(this, arguments)
      // 或者直接 fn()
      timeout = null
    }, wait)
  }
}

二、节流（throttle）

• 节流：就是指连续触发事件但是在 n 秒中只执行一次函数

/**
 *
 * @param func 执行函数
 * @param delay 节流时间,毫秒
 * 
 */
export const throttle = function(func, delay) {
  let timer = null
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments)
        // 或者直接 func()
        timer = null
      }, delay)
    }
  }
}