防抖(debounce) 和 节流(throttling)

最新推荐文章于 2024-07-25 17:14:51 发布
原创 最新推荐文章于 2024-07-25 17:14:51 发布 · 301 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js

本文详细解析了防抖(debounce)与节流(throttle)两种技术在处理高频事件时的区别，适合避免频繁操作导致的界面问题，适用于前端开发中点击提交等场景。

防抖和节流：事件频繁被触发时，单位时间内只执行一次

防抖（debounce）：事件被触发时，设定一个周期延期执行，若周期间又被触发，则周期重新设定，直到周期结束执行操作。应用频繁点击提交
延迟debounce，示意图：
在这里插入图片描述
前缘debounce， 示意图
在这里插入图片描述

节流：固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。

延迟throttling示意图：
在这里插入图片描述
前缘throttling 示意图：

在这里插入图片描述
如果事件触发是高频但是有停顿时，可以选择debounce； 在事件连续不断高频触发时，只能选择throttling，因为debounce可能会导致动作只被执行一次，界面出现跳跃。

引用地址详情：https://blog.youkuaiyun.com/hupian1989/article/details/80920324

防抖debounce 和 节流throttling封装成一个方法，使用场景分类
jieweiwujie的博客
07-07 339
防抖debounce 和 节流throttling封装成一个方法，使用场景分类
帮你彻底搞懂防抖和节流（附带在React使用的一个例子）
码飞_CC的博客
07-17 8153
文章目录前言防抖（debounce）节流（throttle）两个比喻来帮助区分防抖和节流 前言 开门见山，使用防抖和节流技术的意义：节约资源，提升用户体验。 浏览器中有许多事件会在很小时间间隔内频繁触发，比如：监听用户的输入（keyup、keydown）、浏览器窗口调整大小和滚动行为（resize、scroll）、鼠标的移动行为（mousemove）等。如果这些事件一触发我们就执行相应的事件处理函...
React 防抖与节流用法
TianXuab的博客
09-08 2071
当用户频繁滚动页面或调整窗口大小时，我们可以设置一个固定的时间间隔，只在该时间间隔内执行一次回调函数。在React中使用防抖的常见场景是处理输入框的搜索功能。当用户输入时，我们可以设置一个延迟时间，只有在用户停止输入一段时间后才触发搜索请求。请注意，以上示例代码中使用了Lodash库来提供防抖和节流的函数。函数会被调用，但是由于节流的作用，只有在200毫秒内第一次滚动事件触发时，才会真正执行滚动逻辑。但是，由于防抖的作用，只有在用户停止输入500毫秒后，才会执行真正的搜索逻辑。在上面的代码中，我们使用。
防抖和节流(React和Vue版)
a253399414的博客
12-21 625
背景 在公司项目中有购物车功能，最近在测试中碰到一个问题，在点击购物车某个商品的添加或者减少按钮时，每次的点击后都会请求服务器，如果快速点击按钮将会对服务器造成大量的请求，这显然会占用大量的服务器资源。而防抖和节流是控制事件触发频率的方法，可以对此类事件进行很好的限制。 防抖 函数防抖，这里的抖动就是执行的意思，而一般的抖动都是持续的，多次的。假设函数持续多次执行，我们希望让它冷静下来再执行。也就是当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行。在我的业务场景里面就是，
react中 防抖与节流
2302_80769715的博客
04-15 773
服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似。防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。文本输入的验证，连续输入文字后发送 AJAX 请求进行验证，验证一次就好。节流函数原理：确保在连续触发事件的过程中，某一时间段内只执行一次操作。防抖函数的原理：保证在连续触发事件的过程中，只执行最后一次操作。拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动。按钮提交场景：防止多次提交按钮，只执行最后提交的一次。
react 防抖和节流
weixin_43954835的博客
01-28 1624
节流: 一段时间内只运行一次，若在这段时间内重复触发，只有第一次生效。防抖: 一段时间后在执行该事件，若在这段时间内被重复触发，则重新计时。引入：import _ from 'lodash'节流一般用在按钮上，防抖一般用在搜索上。第三方函数工具库：lodash。安装：npm i lodash。react封装好的防抖和节流。如有问题欢迎讨论指正~
vue 节流throttling防抖debounce
qq_19323867的专栏
04-17 1170
节流和防抖常用与监听滚动事件，移动事件，窗口改变大小事件，输入事件等高频触发事件，当事件处理函数较为复杂时，将导致无法实时响应，降低用户体验度，影响效率，出现页面卡顿，假死等现象。 debounce周期内有新事件触发，清除旧定时器，重置新定时器；这种方法，需要高频的创建定时器。 throttling周期内有新事件触发时，重置定时器开始时间撮，定时器执行时，判断开始时间撮，若开始时间撮被推后...
防抖(debounce) 和 节流(throttling)的封装使用-最终发布npm
qq_39225639的博客
06-07 1468
函数的防抖和节流目的都是为了限制函数的执行次数，前者是通过setTimeout进行实现，后者通过一定时间间隔进行实现；通过这次防抖函数的封装，你可能会对闭包，apply，call，bind，this指向，箭头函数，等知识有更深入的认识。
react简单实现防抖和节流
qq_17189095的博客
07-04 960
在日常开发中，我们经常会有防抖和节流的需要，可以减小服务器端压力，提升用户体验，本文就详细的介绍了react简单实现防抖和节流。
flutter:防止抖动的存储库和防止抖动的存储库（Cod3r）
03-06
防止抖动的存储库和防止抖动的库，在线帮助（Cod3r）。
当Flutter遇到节流与防抖的思路和流程优化
08-26
主要给大家介绍了关于当Flutter遇到节流与防抖的思路和流程优化的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在React中使用防抖节流
m0_46430338的博客
11-22 3195
在React中使用防抖节流 防抖和节流 先来介绍一下防抖和节流 防抖：事件触发后延迟n秒在执行，如果在这n秒内再次触发则重新计时。即在一段时间内只允许事件执行一次，常用于表单提交，输入框防抖 节流：事件触发后延迟n秒在执行，并且在这n秒内再次触发事件时不允许执行。即减少一段时间内事件触发的频率，常用与监听滚动条滚动，鼠标移动，窗口大小变化 依据上面的定义可以手写一个防抖和节流 防抖： const debounce = (fn, delay) => { let timer return
react防抖和节流hooks封装
最新发布
任磊
07-25 2492
react防抖和节流hooks封装以及注意事项
防抖节流以及React Hook中的防抖节流
lovezhuer1的博客
03-22 5217
React Hook防抖前言一、pandas是什么？二、使用步骤1.引入库2.读入数据使用Umi Hooks防抖节流 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： impor
React事件的节流和防抖
iYNing的博客
12-23 756
节流----throttle import throttle from 'lodash/throttle'; export default class Search extends Component { constructor(props) { super(props) this.handleClick = throttle(this.handleClick , 1000); } handleClick = (e) => { ... } } render() { retur
react 节流和防抖
梦若在心就在的博客
04-19 445
react 官网所在的位置
一文搞懂如何在 React 中使用 防抖（Debounce）和 节流（Throttle）
小陈的博客
02-27 7589
在自定义 hook 中，使用了另外一个 state 进行保存和更新状态，只有在间隔时间到了才会更新，然后将这个新的 state 返回出去，在页面上可以这样使用，直接依赖 返回出来的状态，这样每次这个状态改变时，就是间隔时间到了的时候，就可以进行异步请求了。而节流函数则是每隔一段时间就执行一次请求。在前端开发中，防抖和节流函数几乎是必备的技能，它们的实现原理都离不开 js 闭包的特性，而在 React 中通过使用自定义的 hook，可以达到一样的效果，有些场景下可能还更方便些，但总的来说本质还是那样。
重新学防抖debounce和节流throttle，及react hook模式中防抖节流的实现方式和注意事项
weixin_43844392的博客
09-29 1699
概念理解 防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 说起防抖大家肯定会想到节流,着两个就跟一对双胞胎一样,让大家经常傻傻搞不清楚 我们先来看一下节流的概念 节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率 我拿电梯关门举个例子吧: 防抖 你按了电梯关门按钮,电梯还有三秒要关闭,在你要关闭前的1.5s,按了一次开门按钮电梯将会重新将要关闭时间重置为3秒 节流 你按了电梯关门按钮,在电梯将要关闭的三秒内,你再怎
掌握tlence：JavaScript中的防抖和节流技术
4. **Wait**：虽然不是一个直接的技术术语，但与Throttling和Debouncing相关联，因为它们都涉及到等待一定时间后才执行函数。 5. **Throttling & Debouncing**：这两个术语作为JavaScript中的方法，用于控制函数...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值