js防抖节流

一、防抖(debounce)

• 作用：高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间
• 类似于回城8秒，如果回城中被打断，再次回城需要再等8秒
• 应用场景：搜索提示；搜索时不断输入，用防抖来节约请求资源

function debounce(callback: (...args: unknown[]) => unknown, delay: number) {
  let timer: number | NodeJS.Timeout
  return function (...args: unknown[]) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      callback.apply(this, args)
    }, delay)
  }
}

二、防抖(throttle)

• 作用：限定事件在一定时间内只能执行一次
• 节流类似于平A,受攻速的限制
• 应用场景：监听滚动条滚动加载数据，即边滚动边加载;鼠标多次点击只触发少次

function throttle(callback: (...args: unknown[]) => unknown, delay: number) {
  let timer: number | NodeJS.Timeout | null
  return function (...args: unknown[]) {
    if (!timer) {
      timer = setTimeout(() => {
        callback.apply(this, args)
        timer = null
      }, delay)
    }
  }
}