JS 许冬博客

← 返回文章列表

JavaScript2018/06/09·1284 次阅读

函数防抖与节流：从场景到实现

函数防抖与节流：从场景到实现

高频事件（resize、scroll、输入框 keyup）触发回调的次数远超需要，防抖和节流是两种限速思路。

防抖 debounce：等你停下来再执行

电梯门的例子：每次有人进来，门就重新计时，直到没人进来才关门。连续触发时，只执行最后一次。

典型场景：搜索框输入联想、窗口 resize 后重排、表单防重复提交。

function debounce(fn, delay) {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

input.addEventListener('input', debounce((e) => {
  console.log('发起搜索：', e.target.value)
}, 300))

节流 throttle：固定频率执行

水龙头滴水的例子：不管你怎么拧，单位时间只滴一滴。连续触发时，每隔 delay 必定执行一次。

典型场景：scroll 滚动加载、鼠标移动跟随、抢购按钮连点。

function throttle(fn, delay) {
  let last = 0
  return function (...args) {
    const now = Date.now()
    if (now - last >= delay) {
      last = now
      fn.apply(this, args)
    }
  }
}

window.addEventListener('scroll', throttle(() => {
  console.log('滚动位置：', window.scrollY)
}, 200))

怎么选

只关心"最终结果" → 防抖（停止输入才搜索）
关心"过程中的持续反馈" → 节流（滚动时按节奏响应）

生产环境直接用 lodash 的 debounce/throttle，支持 leading/trailing 配置，边界情况（立即执行、返回值、取消防守）都处理好了。

看到这里了？如果这篇文章帮到过你

请我喝瓶可乐就好 🥤

收款码

评论0 条

还没有评论，来抢沙发～