debounce与throttle区别及其应用场景

最新推荐文章于 2024-06-27 13:36:25 发布
最新推荐文章于 2024-06-27 13:36:25 发布
阅读量563 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fredricen/article/details/105074608
版权

概念

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 重新计算样式或布局
throttle
  • resize window 重新计算样式或布局
  • scroll 时触发操作，如随动效果：throttle
  • 对用户输入的验证，不想停止输入再进行验证，而是每n秒进行验证

图片说明

在参考了RxJS官网的描述后，觉得豁然开朗，用图片说明最清晰

debounceTime假设一个数据源每隔一秒发送一个数，而我们使用了debounceTime操作符，并设置了延时时间，那么在数据源发送一个新数据之后，如果在延时时间内数据源又发送了一个新数据，这个新的数据就会被先缓存住不会发送，等待发送完数据之后并等待延时时间结束才会发送给订阅者，不仅如此，在延时时间未到的时候并且已有一个值在缓冲区，这个时候又收到一个新值，那么缓冲区就会把老的数据抛弃，放入新的，然后重新等待延时时间到达然后将其发送。

throttleTime

该操作符主要能力跟我们认知的节流函数也是一致的，就是它会控制一定时间内只会发送一个数据，多余的会直接抛弃掉。唯一和防抖操作符不一致的地方就在于它对于第一个值是不会阻塞的。

参考：
JS throttle与debounce的区别
debounceTime
throttleTime

fredricen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
debounce & throttle 去疑
山茶树和葡萄树
04-09 240
debounce Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a ...
JS魔法堂：函数节流（throttle）与函数去抖（debounce）
weixin_33836223的博客
12-06 446
一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　   以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。   1. window对象的resize、scroll事件   2. 拖拽时的mousemove事件   3. 射击游戏中的mousedown、keydown事件   4. 文字输入、自动完成的keyup...
深入理解防抖和节流：应用场景及实现方式详解
热门推荐
你若盛开，清风自来
07-08 1万+
防抖和节流是在JavaScript中常用的两种技术，用于限制某个函数在短时间内被频繁调用。防抖的原理是在事件被触发后，延迟一定时间执行函数，如果在延迟时间内触发了该事件，则重新计时，直到延迟时间内没有再次触发事件，才执行函数。节流的原理是在规定的时间内，只让函数执行一次，无论事件触发的频率如何。防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。
JavaScript性能优化利器：全面解析防抖（Debounce）与节流（Throttle）技术、应用场景及Lodash、RxJS、vueuse/core Hook等高效第三方库实践攻略
最新发布
JINGWHALE
06-27 868
本文详细介绍了防抖（Debounce）与节流（Throttle）技术的概念、应用场景以及Lodash、RxJS、vueuse/core Hook等高效第三方库实践攻略。JavaScript中的防抖（Debounce）与节流（Throttle）是用来优化高频率事件处理的策略。防抖减少连续触发，节流控制执行频率。
详解防抖函数（debounce）和节流函数（throttle）
dksks130的博客
12-06 9048
详解防抖函数（debounce）和节流函数（throttle）
debounce(防抖)和throttle(节流)小结
qq_59125846的博客
05-19 1051
前端工程师们都听过看起来很高级的词，节流和防抖，其实节流就是throttle，防抖就是debounce，其实这个也属于前端性能优化的一部分。在做远程搜索时，如果每输入1个字就调用1次接口，就会频繁查询数据库，假设我们的查询是"12345"，不考虑用户输入错误的情况，至少会请求5次。再思考一个问题，按钮的click重复触发(例如快速点击2次，3次，...n次)该如何在前端做一层拦截，避免发送重复请求到服务端，最常见的是新增时插入重复数据，这个问题该怎么办呢？
防抖(debounce) 和 节流(throttling)
程序员良仔
07-04 1726
防抖和节流实现原理，应用场景，有什么区别，这个问题在面试中也是高频题，本文为大家解答
js中的节流和防抖的区别及应用场景
01-08
函数节流(throttle)和防抖(debounce)：是一种性能优化手段 一、函数节流 类比生活中的例子。高频率触发某个事件就像一个大开的水龙头，水流源源不断大量流出，就像代码在不断执行。这是对资源的一种浪费。我们要通过...
javascript中的throttle和debounce浅析
10-25
主要介绍了javascript中的throttle和debounce浅析,分别介绍了throttle和debounce的使用场景及具体案例,需要的朋友可以参考下
JS中的防抖与节流及作用详解
10-17
在JavaScript中，防抖（debounce）和节流（throttle）是两种常见的优化策略，它们主要用于处理高频触发的事件，如窗口的resize、scroll事件，或者用户输入时的keyup事件等。这两种策略的主要目的是限制函数的执行...
Javascript高级应用与实践
09-29
4. **防抖与节流**：利用防抖（debounce）和节流（throttle）技术减少不必要的函数调用次数，尤其是在处理频繁触发的事件（如窗口resize事件）时尤为重要。 5. **懒加载**：对于大型项目来说，实现图片、组件等资源...
Vue中函数防抖节流的理解及应用实现
11-21
Vue中的函数防抖和节流技术是优化性能的重要手段，主要应用于处理频繁触发的事件，如用户输入、滚动、窗口大小调整等。这两种技术的主要目的是限制函数的执行频率，以节省系统资源，防止过度计算。 一、函数防抖 ...
浅析Debounce 与 Throttle的区别
RRie1的博客
12-24 1878
这两天在学习前端知识，在Vue的官方教程中看到了这两个概念，查阅相关资料后，做以下整理。本文适合刚接触到这个概念，但是不知道它们有啥区别的朋友阅读。我尽量讲得通俗易懂容易理解些，但是水平有限，不足之处欢迎批评指正。
白话debounce和throttle
09-21 240
遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件，如果不进行性能的优化，就可能会出现页面卡顿的现象，比如： 鼠标事件：mousemove(拖曳)/mouseover(划过)/mouseWheel(滚屏) 键盘事件：keypress(基于ajax的用户名唯一性校验)/keyup(文本输入检验、自动完成)/keydown(游戏中的射击) window的resize/scroll事...
防抖函数（debounce）和节流函数（throttle）的作用及应用场景
风一样的我们的博客
08-21 870
当用户输入完成之后（delay 时间已过），那么就会触发 debounce 中的回调函数，也就是 keydown。当又执行相同方法时，若前一个定时任务未执行完，则 清除掉定时任务，重新定时。函数防抖，就是指触发事件后，在 n 秒后只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数的执行时间。列举: 乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。debounce 回调函数返回一个防抖之后的函数，因此实现了防抖的功能。简单的说，当一个动作连续触发，只执行最后一次。
函数节流（Throttle）和防抖（Debounce）解析及其iOS实现
weixin_45578057的博客
03-02 1656
一、Throttle和Debounce是什么 Throttle本是机械领域的概念，英文解释为： A valve that regulates the supply of fuel to the engine. 中文翻译成节流器，用以调节发动机燃料供应的阀门。在计算机领域，同样也引入了Throttle和Debounce概念，这两种技术都可用来降低函数调用频率，相似又有区别。对于连续调用的函数，尤其是触发频率密集、目标函数涉及大量计算时，恰当使用Throttle和Debounce可以有效提升性能及系统稳定性
throttle(节流)和debounce(防抖)的区别
Da_Xiong的博客
01-10 2084
throttle(节流)和debounce(防抖)的区别
节流（Throttle）和防抖（Debounce）傻傻分不清
weixin_30399821的博客
08-07 175
这两个概念有时候傻傻分不清，但实际工作中，相信只要需求足够清楚后，大家也都能实现这种逻辑控制，只是不知道这些术语罢了，就像“闭包”（有些人看到这个词时，可能又要自我解释和纠结了...）。但这些术语既然已经产生了，而且还在面试中被经常提起，那我们还是需要来文绉绉一回，参考一些文章，做个梳理。 节流概念(Throttle) 从上一次命令结束开始的一定时间范围t内，如果多次连续下达命令，则只...
如何理解debounce(防抖)和throttle(节流)?
weixin_51225684的博客
07-21 772
节流像阀门一样控制水流，避免单位时间内流量过大防抖防止抖动，比节流的流量控制效果更佳明显在做远程搜索时，如果每输入1个字就调用1次接口，就会频繁查询数据库，假设我们的查询是"12345"，不考虑用户输入错误的情况，至少会请求5次。再思考一个问题，按钮的click重复触发(例如快速点击2次，3次，...n次)该如何在前端做一层拦截，避免发送重复请求到服务端，最常见的是新增时插入重复数据，这个问题该怎么办呢？有没有一种方法，可以隔个几百毫秒再去查询呢？...
debounce 或 throttle 函数是什么，举例子
09-23
### 回答1： debounce 和 throttle 是两种用于限制函数调用频率的技术。 debounce 函数会在一定时间内把多次函数调用合并成一次。例如，我们希望限制用户在输入框中输入的频率，以免服务器压力过大。我们可以使用 debounce 函数，设置一个延迟时间，在用户停止输入后一段时间内只执行一次回调函数。 throttle 函数会在一定时间内限制函数的调用次数。例如，我们希望限制用户滚动页面时图片懒加载的频率，以免影响性能。我们可以使用 throttle 函数，设置一个执行频率，在规定时间内只执行一次或几次回调函数。 ### 回答2： debounce函数和throttle函数都是用于处理频繁触发的事件，以减轻性能负担和提高用户体验的函数。 debounce函数会在规定的延迟时间内，只执行最后一次触发的事件。例如，在一个输入框中实时搜索关键字，如果在用户连续输入时立即处理搜索逻辑，可能会导致多次无意义的请求。使用debounce函数可以在用户输入完成后的一段时间内，再处理搜索逻辑，避免了频繁操作。 throttle函数会在规定的时间间隔内，按照规定的频率执行事件。例如，在滚动页面时，如果在每次滚动时都触发一次事件，可能会导致页面卡顿。使用throttle函数可以控制触发事件的频率，比如每隔200毫秒触发一次事件，以减轻页面负担。 举个例子来说明其用法： 假设有一个按钮需要防止多次点击： ```html <button id="btn">点击</button> ``` 使用debounce函数来防止多次点击： ```javascript function debounce(func, delay) { let timerId; return function (...args) { clearTimeout(timerId); timerId = setTimeout(() => { func.apply(this, args); }, delay); }; } function handleClick() { console.log("按钮被点击"); } const btn = document.getElementById("btn"); btn.addEventListener("click", debounce(handleClick, 200)); ``` 在这个例子中，通过使用debounce函数，当按钮被多次点击时，只有在最后一次点击后的200毫秒内才会触发handleClick函数，避免了多次点击产生多个事件的问题。 类似地，使用throttle函数可以控制按钮点击的频率，保证每隔一定时间间隔才能触发事件。 ### 回答3： debounce 函数和 throttle 函数是用来控制函数调用频率的工具函数。 debounce 函数的作用是延迟执行函数，当事件被触发后，函数不会立即被执行，而是延迟一段时间后执行。如果在延迟期间内又触发了相同的事件，那么之前的延迟会被取消，重新开始计时。这样可以避免在连续触发事件时频繁执行函数，提高性能。 举个例子，比如在网页输入框中实时搜索功能的实现。当用户输入时，我们希望能够在用户停止输入一段时间后才执行搜索操作，以避免频繁请求服务器。这时可以使用 debounce 函数来延时执行搜索函数，只有在用户停止输入一段时间后才真正执行搜索操作。 throttle 函数的作用是限制函数的执行频率，即无论触发多少次事件，函数都不会连续执行，而是固定时间间隔内执行一次。它可以用来控制一个函数在短时间内不能被频繁调用，以避免性能问题。 举个例子，比如在网页上绑定鼠标滚动事件时，如果没有对事件进行处理，每次鼠标滚动都会触发滚动事件，而滚动事件可能会执行一些复杂的操作，这样会导致性能问题。这时可以使用 throttle 函数来限制滚动事件的触发频率，比如每隔 100ms 执行一次滚动事件处理函数，这样可以降低函数的执行次数，提高性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值