防抖和节流

最新推荐文章于 2025-08-26 11:22:35 发布

原创最新推荐文章于 2025-08-26 11:22:35 发布 · 496 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端同时被 2 个专栏收录

13 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细介绍了前端开发中的防抖和节流技术。防抖在高频触发事件时仅执行最后一次，常用于按钮点击请求和输入框实时搜索。节流则在设定时间内保证事件只执行一次，适用于页面滚动和鼠标移动等场景。两者都是优化高频率执行代码的方法，但适用场景有所不同。

防抖

一、什么是防抖

一个事件被高频触发时，我们只想让他执行一次

二、应用场景

1.点击按钮会请求接口，如果用户反复点击触发请求，这个时候就可以用防抖

2.输入框输入时请求数据

三、实现原理

四、代码

let timer = ''
export function antiShake(fun) {
  clearTimeout(timer)
  timer = setTimeout(() => {
    if (fun)fun()
  }, 1000)
}

节流

一、什么是节流

节流是在一段时间内只运行一次，若在一段时间内重复触发，只有一次生效。

二、应用场景

1. 页面滚动事件

2.累计计算鼠标移动距离

三、实现原理

四、代码

let time = 0
export function throttle(fun) {
  if (time === 0) {
    if (fun)fun()
    time = 1
    setTimeout(() => {
      time = 0
    }, 2000)
  }
}

总结

相同点

防抖和节流本质上是优化高频率执行代码的手段

不同点

防抖是让你多次触发，只生效最后一次。适用于只需要一次触发生效的场景

节流是让你的操作，每隔一段时间触发一次。适用于多次触发要多次生效的场景