防抖、节流

防抖(Debounce)"和"节流(Throttle)"是前端开发中常用于优化高频率事件触发(如 scrollresizeinputmousemove 等)的两种技术。它们的核心目的是控制函数执行的频率,提高性能和用户体验。

一、防抖(Debounce)

定义: 一段时间内只执行最后一次操作,适合"只关心最后一次触发"的场景。

应用场景:

  • 搜索框输入联想
  • resize、scroll事件优化
  • 表单输入校验等

例子:

js 复制代码
复制编辑
function debounce(fn, delay) {
  let timer = null
  return function (...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

// 使用
const handleInput = debounce(e => {
  console.log('用户停止输入:', e.target.value)
}, 500)

二、节流(Throttle)

定义: 一定时间内只执行一次操作,适合"每隔一段时间执行一次"的场景。

应用场景:

  • 页面滚动事件
  • 拖拽
  • 点击事件防止频繁提交

例子:

js 复制代码
复制编辑
function throttle(fn, interval) {
  let lastTime = 0
  return function (...args) {
    const now = Date.now()
    if (now - lastTime >= interval) {
      lastTime = now
      fn.apply(this, args)
    }
  }
}

// 使用
const handleScroll = throttle(() => {
  console.log('节流执行一次 scroll')
}, 200)

总结对比:

特性 防抖(Debounce) 节流(Throttle)
执行频率 只在最后一次事件后执行一次 固定间隔执行一次
适合场景 搜索联想、自动保存、输入监听 滚动监听、拖拽、频繁点击限制
控制方式 定时器重置 时间戳或定时器
相关推荐
渣哥10 分钟前
代理选错,性能和功能全翻车!Spring AOP 的默认技术别再搞混
javascript·后端·面试
遇见火星14 分钟前
Docker入门:快速部署你的第一个Web应用
前端·docker·容器
WeilinerL31 分钟前
泛前端代码覆盖率探索之路
前端·javascript·测试
浮游本尊34 分钟前
React 18.x 学习计划 - 第五天:React状态管理
前端·学习·react.js
-睡到自然醒~40 分钟前
[go 面试] 前端请求到后端API的中间件流程解析
前端·中间件·面试
洛卡卡了1 小时前
Sentry 都不想接,这锅还让我背?这xx工作我不要了!
前端·架构
咖啡の猫1 小时前
Vue 实例生命周期
前端·vue.js·okhttp
JNU freshman1 小时前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥1 小时前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
爱吃的强哥1 小时前
Vue2 封装二维码弹窗组件
javascript·vue.js