当前位置：首页 > news >正文

JS-防抖与节流

news 来源：原创 2025/6/9 5:55:43

1、防抖（Debounce）

连续触发事件时，仅在最后一次触发后等待指定时间再执行回调函数‌

function debounce(fn, delay = 300, immediate = false) {
  let timer = null
  return function(...args) {
    timer && clearTimeout(timer)
    if (immediate) { // 立即执行模式
      fn.apply(this, args)
    } else {
      timer = setTimeout(() => {
        fn.apply(this, args)
      }, delay)
    }
  }
}

2、节流（Throttle）‌

连续触发事件时，固定时间间隔内仅执行一次回调函数‌

function throttle(fn, delay = 300) {
  let lastTime = 0
  let timer = null
  return function(...args) {
    const now = Date.now()
    if (now - lastTime >= delay) {
      fn.apply(this, args)
      lastTime = now
    } else {
      timer && clearTimeout(timer)
      timer = setTimeout(() => {
        fn.apply(this, args)
        lastTime = Date.now()
      }, delay)
    }
  }
}

3、核心差异对比

‌特性‌	防抖 (Debounce)	节流 (Throttle)
‌触发逻辑‌	停止触发后执行	固定间隔执行
‌适用场景‌	搜索建议、窗口 resize	滚动监听、鼠标移动
‌执行次数‌	触发后只执行一次	间隔内至少执行一次
‌高频触发‌	最后一次生效	均匀执行