手写防抖函数debounce和节流函数throttle

防抖 debounce

• 定义：函数被触发时，需要先延迟，在延迟的时间内，如果再次被触发，则取消之前的延迟，重新开始延迟。这样就能达到，只响应最后一次，其余的请求都过滤掉。某个函数在短时间内只执行最后一次。

function debounce(fn, delay, immedia = false) {
  let timer = null
  return () => {
    if (timer) clearTimeout(timer)
    // 首次立即执行
    if (immedia && !timer) {
      fn.call(this)
      timer = setTimeout(() => {
        timer = null
      }, delay)
    }
    timer = setTimeout(() => {
      fn.call(this)
      timer = null
    }, delay)
  }
}

限流 throttle。

• 定义： 多次触发同一个函数，同一段时间内只执行一次

function throttle() {
  let previous = 0
  return () => {
    const now = Date.now()
    if (now - previous > delay) {
      fn.call(this)
      previous = Date.now()
    }
  }
}