防抖和节流throttle-debounce(不会吧!不会吧!不会这么详细都不理解吧!)

最新推荐文章于 2024-03-21 16:27:05 发布
最新推荐文章于 2024-03-21 16:27:05 发布
阅读量239 收藏
点赞数
分类专栏： js总结 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuan_xiaoxin/article/details/117604914
版权

防抖和节流

什么是防抖和节流?

触发------>执行
我点击按钮为触发
按钮弹出一个666,为执行

1. 防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

理解:防抖

  1. 你一直触发的事件,在你不触发后的一个设定好的时间之后去执行
  2. 这个时间是固定的,当你在你设定的这个时间内重新去触发
  3. 它就重新开始计时,直到你最后一次触发度过这个时间
  4. 事件就会执行.

举一个有趣的防抖案例:

你不停地按控制炸弹爆炸的计时器(debounce防抖方法),这个计时器有点奇怪,它的时间从0开始跑,跑5秒,炸弹就会炸,(防抖触发的时间为5秒),计时器有一个清空时间的按钮,当你按按钮时间就清零,计时开始,你只要在5秒内按按钮,炸弹就不会爆炸(事件就不会触发),当你没按按钮,计时器达到五秒,炸弹就BONG!!!

2. 节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

理解:节流

你一直触发的事件,不会一直执行,当到达你设定的那个时间后,触发一次,有间隔的触发一次,有点类似定时器setInteval()方法的模型.

应用场景

一些一直被触发的事件,such as(例如:)
滚动事件,
搜索框列表检索
等等等等

好啦,以上就是防抖和节流的概念和理解啦
如果,还有不懂的,欢迎来评论区留

最低0.47元/天 解锁文章
源小新
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
防抖与节流
m0_62885322的博客
06-06 374
...
throttle-debounce 节流和防抖
qq_40147756的博客
09-04 667
throttle-debounce 的原理和实现
防抖函数debounce规定时间内多次点击只触发一次
m0_48971013的博客
11-08 403
防抖函数debounce规定时间内多次点击只触发一次
Vue中防抖(debounce)、节流(throttle)的介绍与运用
热门推荐
天命爱心职责的博客
01-06 1万+
Vue中防抖(debounce)、节流(throttle)的介绍与运用 防抖是在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。节流是 规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。
防抖与节流函数
weixin_47319740的博客
08-14 158
防抖（Debounce） 概念 防抖，指的是在触发事件后的一定时间内（例如 3秒）函数只能执行一次，如果在这段时间（3秒）内再次触发事件，则会重新计算函数执行的时间。 为了更好的理解，在这边举个公交车的例子：公交车上，只要乘客不断地刷卡，司机师傅就不能开，等乘客都上车了，再等待的时间内没有人上车，才会开车走。如果在wait的时间内又有人上车，那就重新开始一个等待时间 防抖函数分类 非立即执行 立即执行 非立即执行版 就是在触发事件后不立即执行，而是在一定的等待时间后执行如果在这段时间内又触发事件，就重新
简述throttle-debounce
阿祥_CSDN
01-21 1万+
throttle-debounce 限制函数的执行频率 GitHub 地址 throttle-debounce throttle 限制回调函数的执行频率 /** * 节流(限制函数的执行频率) * @param delay 延迟的时间 * @param noTrailing 在最后一次调用时是否执行 callback，true 不执行，false
防抖和节流Throttle and debounce.html
05-17
防抖和节流
前端项目-jquery-throttle-debounce.zip
09-03
"前端项目-jquery-throttle-debounce.zip" 是一个专注于这一目标的项目，它利用 jQuery 的扩展插件实现了防抖（throttle）和节流（debounce）功能。接下来，我们将深入探讨这两个概念及其在实际应用中的价值。 **...
javascript函数的节流[throttle]与防抖[debounce]
10-19
JavaScript中的节流（throttle）和防抖（debounce）是两种常见的性能优化技术，用于控制函数的执行频率，特别是对于那些在短时间内被频繁触发的事件处理函数，如滚动、窗口大小调整、输入验证等场景。 节流...
Javascript节流函数throttle和防抖函数debounce
01-18
针对这两种需求就出现了debounce和throttle两种解决办法。 1. resize事件 2. mousemove事件 3. touchmove事件 4.scroll事件 throttle 与 debounce 在现在很多的javascript框架中都提供了这两个函数。例如 jquery中有...
throttle-debounce:油门和反跳功能
05-06
油门反跳 油门和反跳功能。 该模块与（但），但已转换为ES模块和CommonJS格式。 安装 npm install throttle-debounce --save 用法 throttle import { throttle } from 'throttle-debounce' ; const throttleFunc = throttle ( 1000 , false , ( num ) => { console . log ( 'num:' , num ) ; } ) ; // Can also be used like this, because noTrailing is false by default const throttleFunc = throttle ( 1000 , ( num ) => { console . log ( 'num:' , num )
debounce_throttle.rar
04-19
JS节流和防抖展示页面代码. debouncing, executes the function if there was no new event in $wait milliseconds. In case of a "storm of events", this executes once every $threshold.
应用篇二：事件的节流（throttle）与防抖（debounce）
乐夫天命兮的博客
09-27 677
事件的节流（throttle）与防抖（debounce） 上一节我们一起通过监听滚动事件，实现了各大网站喜闻乐见的懒加载效果。但我们提到，scroll 事件是一个非常容易被反复触发的事件。其实不止 scroll 事件，resize 事件、鼠标事件（比如 mousemove、mouseover 等）、键盘事件（keyup、keydown 等）都存在被频繁触发的风险。 频繁触发回调导致的大量计算会引发页面的抖动甚至卡顿。为了规避这种情况，我们需要一些手段来控制事件被触发的频率。就是在这样的背景下，throttl
throttle debounce 总结
weixin_33816821的博客
07-16 460
理解throttle debounce 比较 二者本质：都是限制频繁触发二者区别：throttle: 节流阀，保证多少ms内只执行一次。debounce: 去抖，保证多少ms内不再被触发时就会执行一次。 类比电梯策略理解： throttle：第一个人进来后15s运送一次，不等待。debounde：第一个人进来15s后运送一次，假设15s内...
每天阅读一个 npm 模块（4）- throttle-debounce
weixin_34204057的博客
08-31 1150
系列文章： 每天阅读一个 npm 模块（1）- username 每天阅读一个 npm 模块（2）- mem 每天阅读一个 npm 模块（3）- mimic-fn 上一篇文章中介绍的属性描述符的知识太偏于理论，今天阅读的 throttle-debounce 模块会实用许多，在工作常常可以用到。 一句话介绍 今天阅读的 npm 模块是 throttle-debounce，它提供了 throttl...
debounce和throttle
jiekou123456的博客
08-10 985
搞懂debounce(防抖)和throttle(节流)
函数节流（Throttle）和防抖（Debounce）解析及其iOS实现
weixin_45578057的博客
03-02 1639
一、Throttle和Debounce是什么 Throttle本是机械领域的概念，英文解释为： A valve that regulates the supply of fuel to the engine. 中文翻译成节流器，用以调节发动机燃料供应的阀门。在计算机领域，同样也引入了Throttle和Debounce概念，这两种技术都可用来降低函数调用频率，相似又有区别。对于连续调用的函数，尤其是触发频率密集、目标函数涉及大量计算时，恰当使用Throttle和Debounce可以有效提升性能及系统稳定性
防抖节流插件throttle-debounce
最新发布
李剑一
03-21 543
节流（Throttle）：当事件被连续触发多次时，只有第一次触发会立即执行，后续的触发会根据设定的时间间隔进行限制。 防抖（Debounce）：当事件被连续触发多次时，只有最后一次触发会生效，前面的触发将被取消。
Vue3 防抖和节流（throttle-debounce）
weixin_52827732的博客
04-08 3804
一：安装 npm install throttle-debounce --save 二： 使用 （throttle-debounce） throttle :节流 import { throttle } from "throttle-debounce" throttleCallback: throttle(1000, false, () => { //业务 }), debounce :防抖 import { debou.
throttle-debounce
04-27
"throttle" 和 "debounce" 都是前端开发中的性能优化技术，用于控制某些函数的执行频率，减少浏览器的负担，提高页面的响应速度。 "Throttle"（节流）技术可以控制函数的执行频率，例如在滚动事件中，可以设置一个时间间隔，每隔一定时间执行一次函数，避免频繁执行导致性能问题。 "Debounce"（防抖）技术可以控制函数的执行时机，例如在输入框输入时，可以设置一个时间间隔，在用户停止输入一段时间后再执行函数，避免频繁执行导致性能问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值