debounce与throttle区别及其应用场景

最新推荐文章于 2026-04-15 12:58:17 发布
原创 最新推荐文章于 2026-04-15 12:58:17 发布 · 1k 阅读 · 0
本文深入探讨防抖(debounce)与节流(throttle)技术，解析两者在处理连续操作时的不同策略。防抖用于合并重复操作，直至操作频率降低；节流则确保操作在固定间隔内仅执行一次，适用于需要定期响应的场景。文章通过具体实例，如AJAX请求合并、窗口调整大小及滚动事件，展示这些技术的实际应用。

概念

debounce

字面理解是“防抖”，何谓“防抖”，就是连续操作结束后再执行，以网页滚动为例，debounce要等到用户停止滚动后才执行，将连续多次执行合并为一次执行。

throttle

字面理解是“节流”，何谓“节流”，就是确保一段时间内只执行一次，以网页滚动为例，throttle是如果用户一直在滚动网页，那么在滚动过程中还是会执行，只是一段时间内只执行一次，将连续执行的间隔变大了。

实现

debounce

第一次触发后，进行倒计wait毫秒，如果倒计时过程中有其他触发，则重置倒计时；否则执行。

throttle

第一次触发后先执行fn（lodash可以通过{leading: false}来取消），然后wait ms后再次执行，在单位wait毫秒内的所有重复触发都被抛弃。

应用场景

debounce

用来丢弃一些重复的密集操作，直到流量减慢。

throttle

用在每隔一定间隔执行回调的场景，即如果有连续不断的触发，每wait ms执行fn一次。

场景举例

debounce
  • ajax 请求合并，不希望短时间内大量的请求被重复发送
  • mouse move 时减少计算次数
  • resize window 重新计算样式或布局
最低0.47元/天 解锁文章
防抖（debounce）和节流（throttle）
天高任鸟飞
11-10 3753
一、防抖 动作绑定事件，动作发生后一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间再触发事件。 具体方法是：在上一次事件触发之后的time时间内如果事件没有再次触发，那么就在time时间后触发，否则将触发的时间作为新的起始点 通俗理解就是，将密集的时间触发事件看作一个时间整体，整个整体只触发一次事件，密集的界定就是相邻事件触发时间小于time，则以这个整体的最后一次事件触发为起始点 ...
面试官：什么是debounce？
java小白翻身
06-07 2255
这是因为Vue是基于响应式原理的框架，在数据变化后需要重新渲染视图，因此将函数封装成 watcher 可以保证在数据更新后才执行相应的操作，避免出现意料之外的情况。是一种限制函数执行频率的技术，它可以在事件触发后延迟一段时间再执行函数，如果在这个时间内再次触发该事件，则之前的计时器会被清除并重新开始计时。在每次被调用时，先清除之前的计时器，并重新设置一个新的计时器，延迟一定时间后执行传入的函数。函数，通过定时器来延迟函数的执行，并能够在规定时间内清除之前的计时器，实现函数调用的控制。函数对该方法进行包装。
彻底搞懂防抖（Debounce）：从手写基础版到企业级 Hook 封装
最新发布
2401_88920300的博客
04-15 369
摘要：本文深入探讨前端开发中的高频触发场景（如搜索联想、窗口调整等）及防抖技术解决方案。文章由浅入深分为四个阶段：1）基础版实现，利用闭包和this绑定；2）解析前置(Leading)与后置(Trailing)执行模式；3）进阶企业级实现，支持Promise、取消功能和精细状态控制；4）React时代的Hooks化实现。通过代码示例详细展示了如何构建功能完善的防抖工具，有效解决性能问题和逻辑错误，适用于各种前端框架和场景。（149字）
JS魔法堂：函数节流（throttle）与函数去抖（debounce）
weixin_33836223的博客
12-06 585
一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　   以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。   1. window对象的resize、scroll事件   2. 拖拽时的mousemove事件   3. 射击游戏中的mousedown、keydown事件   4. 文字输入、自动完成的keyup...
前端防抖（Debounce）和节流（Throttle）详解
热门推荐
m0_64974617的博客
10-21 3万+
防抖是一种延迟执行的技术。它的原理是，当事件被触发时，延迟执行事件处理函数，并且在延迟时间内如果事件再次被触发，则重新开始计时。只有当事件在指定的时间内没有再次触发，事件处理函数才会执行。这样可以避免某些高频率的操作被频繁触发，从而提高性能。节流是一种限制函数执行频率的技术。它的原理是，当事件被频繁触发时，函数会按照一定的时间间隔执行，而不是每次触发事件都执行。换句话说，在一个时间段内，只会执行一次事件处理函数。防抖和节流是前端优化中常用的技术，合理使用可以显著提升用户体验和系统性能。
深入浅出防抖函数 debounce
chern1992的博客
06-17 5588
引言 上一节我们认识了节流函数 throttle，了解了它的定义、实现原理以及在 underscore 中的实现。这一小节会继续之前的篇幅聊聊防抖函数 debounce，结构是一样的，将分别介绍定义、实现原理并给出了 2 种实现代码并在最后介绍在 underscore 中的实现，欢迎大家拍砖。 有什么想法或者意见都可以在评论区留言，下图是本文的思维导图，高清思维导图和更多文章请看我的Github。 #定义及解读 防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只.
lodash.throttle 与 debounce 的区别及应用场景详解
muyun2800的博客
08-07 2052
摘要： throttle（节流）和debounce（防抖）是前端优化高频事件的核心工具，但机制不同： throttle：固定间隔执行一次（如滚动加载），确保稳定频率； debounce：事件停止后延迟执行（如搜索联想），减少无效操作。 AI流式渲染场景应优先选用throttle（如100ms间隔），因其周期性更新能平衡实时性与性能，避免debounce导致的延迟卡顿。关键配置包括合理间隔时间、启用尾部执行（trailing: true）以保数据完整。其他场景如搜索框用debounce，滚动/窗口调整用thr
关于debounce和throttle的区别及应用场景
weixin_30552811的博客
05-13 207
电梯超时 想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应。假设电梯有两种运行策略 `throttle` 和 `debounce` ，超时设定为15秒，不考虑容量限制。 throttle 策略的电梯。保证如果电梯第一个人进来后，15秒后准时运送一次，不等待。如果没有人，则待机。 debounce 策略的电梯。如果电梯里有人进来，等待15秒。如果又人进来，15秒等待重...
防抖（Debounce）和节流（Throttle）的区别和应用场景
cuijiying的博客
12-17 1519
防抖关注的是在一连串事件结束后执行一次（等待时间内如果有新事件触发就重新计时），强调“最后一次执行”。节流关注的是在指定时间间隔内执行一次（无论期间有多少次触发），强调“定期执行”。根据实际需求选择合适的技术，可以有效提升应用的响应速度和用户体验。
浅析Debounce 与 Throttle的区别
RRie1的博客
12-24 2316
这两天在学习前端知识，在Vue的官方教程中看到了这两个概念，查阅相关资料后，做以下整理。本文适合刚接触到这个概念，但是不知道它们有啥区别的朋友阅读。我尽量讲得通俗易懂容易理解些，但是水平有限，不足之处欢迎批评指正。
1.防抖函数（debounce）
小彭的博客
07-23 1935
本文介绍了前端性能优化方法debounce（防抖）的原理与实现。防抖通过setTimeout和clearTimeout控制事件触发，仅在最后一次触发后延迟执行，适用于搜索联想、表单保存等高频场景。文章提供了基础版和进阶版（支持立即执行）的代码实现，并对比了防抖与节流（throttle）的区别。最后给出了TypeScript版本的实现，帮助开发者掌握这一优化技巧，减少不必要的资源消耗。
函数去抖（debounce）& 函数节流（throttle）
qq_30436011的博客
03-03 976
1. 什么是函数去抖 & 函数节流 让某个函数在一定 事件间隔条件（去抖debounce） 或 时间间隔条件（节流throttle） 下才会去执行，避免快速多次执行函数（操作DOM，加载资源等等）给内存带来大量的消耗从而一定程度上降低性能问题。 debounce: 当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。throttle：预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。 debounce使用场景 scrol
防抖函数Debounce实现
Free雅轩的博客
12-20 3091
实现原理就是利用定时器，函数第一次执行时设定一个定时器，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器计时结束后触发函数执行。 手写一个 debounce 防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。 // fn 是需要防抖处理的函数 // wait 是时间间隔 function debounce(fn, wait = 50) { // 通过闭包缓存一个定时器 i
详解防抖函数（debounce）和节流函数（throttle）
dksks130的博客
12-06 1万+
详解防抖函数（debounce）和节流函数（throttle）
防抖(debounce)和节流(throttle) 以及他们的区别
热爱前端的大三在校生
05-11 943
理解防抖和节流，以及他们的区别和主要的应用场景
函数去抖（debounce）& 函数节流（throttle）总结
喵的狂吼
07-14 3万+
//todo
rxjs中的throttle、throttleTime、debounce、debounceTime、audit、audtiTime
zgrbsbf的专栏
02-25 8986
1、debounceTime Emits a value from the source Observable only after a particular time span has passed without another source emission. 大意是，只有在指定的时间间隔内没有产生另外的数据的时候，之前产生的数据才能被observable发射出来。marble diag...
函数去抖（debounce）和 函数节流（throttle）库
黄彪博客
06-16 1367
抖动函数和节流函数 文章目录参考抖动函数和节流函数的区别？debounce去抖throttle节流 参考 带你一起来理解：函数去抖（debounce）和 函数节流（throttle）的作用和区别 抖动函数和节流函数的区别？ 抖动函数：强制一个函数不被重复调用直到等待指定时间已经过去并且等待期间没有被调用。例如在距离上次调用之后100毫秒后才能调用下一次函数。 节流函数：节流会强制规定在单位时间内一个函数调用的最大次数。例如每过100毫秒至少执行一次这个函数。 debounce去抖 定义：
前端函数防抖（debounce）超详解：概念 → 背景问题 → 原理 → 实现 → 演化版本 → 实际应用 → 常见坑点 → 与节流对比 → 源码剖析 → 高级应用 → 总结拓展
DeppBing的博客，全栈修炼记｜记录一个开发者的进化轨迹
09-09 1447
本文详解前端函数防抖（Debounce）技术，针对高频触发事件（如输入框输入、窗口调整等）导致的性能问题，提出将多次操作合并为最后一次执行的解决方案。文章涵盖防抖的核心原理、基础实现、演化版本（立即执行/取消功能）、实际应用场景（搜索优化、表单校验等）及常见坑点（this指向、参数丢失）。通过对比防抖与节流的区别，分析Lodash源码实现，并介绍React/Vue中的高级应用。防抖能有效减少不必要的计算和请求，是前端性能优化的重要手段。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值