函数的防抖和节流

闭包进阶 —— 函数的防抖和节流

函数的防抖：

触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

/**
 * @param {*} func[function] 执行的函数
 * @param {*} wait[number] 间隔多少后秒视为有效点击 默认0.3秒
 * @param {*} immediate[boolean] 控制是否执行 
 *   为true立即执行(频繁操作中第一次点击视为有效点击) 
 *   默认false(频繁操作中最后一次点击有效)(即立即执行和非立即执行)
 */

function debounce(func, wait = 300, immediate = false) {
  let timer = null
  return function (...params) {
    let now = immediate && !timer
    clearTimeout(timer)
    timer = setTimeout(() => {
      timer = null
      !immediate ? func.call(this, ...params) : null
    }, wait)
    now ? func.call(this, ...params) : null
  }
}

函数节流：

指连续触发事件但是在 n 秒中只执行一次函数 节流会降低函数的执行频率

/**
 * @param {*} func[function] 执行的函数
 * @param {*} wait[number] 间隔多少后秒视为有效点击 默认0.3秒
 */

function throttle(func, wait = 300) {
  let timer = null
  let previous = 0 // 记录上次操作时间
  return function (...params) {
    let now = new Date()
    let remaining = wait - (now - previous) // 距离上次操作的间隔时间
    if (remaining <= 0) {
      // 两次操作间隔时间已经超过wait
      window.clearTimeout(timer)
      previous = now
      func.call(this, ...params)
    } else if (!timer) {
      // 两次操作间隔时间小于wait
      timer = setTimeout(() => {
        timer = null
        previous = new Date()
        func.call(this, ...params)
      }, remaining)
    }
  }
}