【JS函数】JS函数之防抖、节流函数

已于 2022-07-04 16:11:12 修改
阅读量776 收藏 3
点赞数 2
分类专栏： JavaScript函数 文章标签： javascript 函数 防抖 节流 前端
于 2022-06-29 09:40:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42451979/article/details/125514018
版权
本文是吉帅振的网络日志中关于JS函数系列的第三篇，主要探讨了防抖(debounce)和节流(throttle)函数的概念、应用场景及其基本实现。防抖函数用于限制频繁操作，常用于输入框搜索、按钮点击和滚动事件等场景。而节流函数则确保在一定时间内只执行一次，适用于页面滚动、鼠标移动和按钮点击等事件处理。通过防抖和节流，可以有效提高前端性能和用户体验。
摘要由CSDN通过智能技术生成
最低0.47元/天 解锁文章
吉帅振的网络日志
关注
专栏目录
js的防抖和节流函数
weixin_43416396的博客
08-11 147
一、防抖（debounce） 1、防抖概念 防抖就是在规定时间内多次触发一个事件，只会执行一次，防止性能浪费和多次触发引起的后端数据异常。 2、应用场景 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖； 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖； 文本编辑器实时保存，当无任何更改操作一秒后进行保存； 当我们在百度搜索时，下方会自动给出相关提示。如果每次用户输入变化都立即查询，那么会造成性能浪费，比如用户想搜索nihao，当用户在输入n
JS防抖函数和节流函数
扛麻袋的少年的博客
07-01 1615
JS 防抖函数和节流函数   在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖 和 节流 是比较好的解决方案。 让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。 html 文件中代码如下： <div id="content" style="height:150px;line-height:150px;t
JavaScript：节流与防抖
最新发布
m0_65029152的博客
07-20 2119
本文主要记录JavaScript中，防抖和节流的相关内容和技术应用；
函数防抖和函数节流
田兴的博客
07-24 5423
问题引入 问题1： 如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？ 问题2： 如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？ 为了应对如上场景，便出现了函数防抖和函数节流两个概念，总的来说： 这两个方法是在时间轴上控制函数的执行次数。 定义 函数防抖 是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新
js---函数节流
门小远的博客
01-05 330
函数节流的目的     从字面上就可以理解，函数节流就是用来节流函数从而一定程度上优化性能的。例如，DOM 操作比起非DOM 交互需要更多的内存和CPU 时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起，有时候甚至会崩溃。尤其在IE 中使用onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在onresize 事件处理程序内部如果尝试
javascript函数防抖节流，适用于搜索多次触发请求等场景。
2301_79054215的博客
04-01 673
在需要使用的组件引用在 methods 中使用应用：==================================================================看一下运行结果：可以看到，我们只要输入一个字符，就会触发这次ajax请求。不仅从资源上来说是很浪费的行为，而且实际应用中，用户也是输出完整的字符后，才会请求。下面我们优化一下：我们加入了防抖以后，当你在频繁的输入时，并不会发送请求，只有当你在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时
浅析JavaScript 函数防抖和节流
01-19
函数防抖和节流都是对高频动作触发回调函数的一个优化，实现方式上有类似之处。先从使用场景做个区分。 防抖使用场景： 表单输入框校验 提交按钮避免重复提交 节流使用场景： scroll,mousemove,resize等 函数防抖...
JS函数节流和函数防抖问题分析
10-18
JavaScript中的函数节流（throttle）和函数防抖（debounce）是两种常见的优化策略，它们主要用于控制函数的执行频率，以避免在高频率事件触发时导致性能问题或不必要的资源消耗。 函数防抖（debounce）的核心思想是...
JS函数节流和防抖之间的区分和实现详解
10-17
JavaScript中的函数节流（Throttle）和防抖（Debounce）是优化性能的重要技术，尤其在处理频繁触发的事件上，如滚动、输入等。两者虽然都能限制函数的执行频率，但工作原理和应用场景有所不同。 **节流（Throttle）...
如何解决js函数防抖、节流出现的问题
12-10
React中使用防抖函数和节流函数 在React事件调用时，React传递给事件处理程序是一个合成事件对象的实例。SyntheticEvent对象是通过合并得到的。 这意味着在事件回调被调用后，SyntheticEvent 对象将被重用并且所有...
js 函数节流
01-08
js 函数节流，里面大概介绍了javascript函数节流的知识，并一实例配置之
JavaScript函数节流与函数去抖
weixin_34114823的博客
07-08 197
介绍 首先解释一下这两个概念： 函数节流（throttle）：是让一个函数无法在很短的时间间隔内连续调用，当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。 函数去抖（debounce）：让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。 两个方法都是用来提升前端性能，减轻浏览器压力。 应用 理解起来有点费力，通过应用来理解就轻松了。通常，我们会在有用户交互参与...
javascript 实时搜索节点节流
weixiaoderensheng的博客
03-12 269
let timeout export const asyncReadSelect = (fileLabelValue, callback, needLable = false) =&gt; { return new Promise((resolve) =&gt; { if (timeout) { clearTimeout(timeout) timeout = ...
深入学习JS — 一篇文章了解JS的节流与防抖
小绵杨
03-14 1486
目录1、节流2、防抖 1、节流 2、防抖
js实现防抖(debounce)与节流(throttle)
Shinebone的博客
04-23 344
防抖(debounce) 一句话概括：防抖是给定一个时间周期，如果触发事件的周期小于该事件(也就是触发过快)，则不会触发事件。 举个例子：我给定的时间周期是1s，如果我在触发第一次事件后1s内触发该事件，则重新开始计时，直到触发周期大于1s才会执行事件的方法。 function debounce(fn,timeout){ let timer = null return funct...
JS防抖与节流
m0_67381422的博客
07-31 213
在单位时间内将频繁触发的事件降低为只触发最后一次。搜索框1.利用闭包原理创建私有变量存储定时器;2.在事件处理函数内先清除定时器，这么做是因为如果还未到时间内触发事件，重新计时;3.启动定时器并注入执行代码;...
js实现搜索框的节流与防抖
热门推荐
weixin_45021098的博客
05-21 1万+
js处理搜索框，节流与防抖防抖节流以下是完整示例代码： 在输入框输入时，要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，没过500ms就查询一次相关字符串，这就是节流。 防抖 防抖的实现思路：每...
JavaScript 事件节流
weixin_42601702的博客
12-23 108
JavaScript 事件节流是一种优化技术，用于减少对浏览器的频繁调用，使得网页的性能得到提升。 具体来说，当用户在网页上进行某些操作时，会触发相应的事件处理函数。如果这个函数执行的代码比较复杂，或者事件频繁触发，会导致浏览器的性能下降。事件节流就是通过设定一个时间间隔，在这个时间间隔内只执行一次事件处理函数，从而减少对浏览器的调用，提升性能。 举个例子，假设我们有一个滚动条滚动事件处理函数，每...
js函数节流和函数防抖
08-30
在JavaScript中，函数节流和函数防抖可以通过编写相应的函数来实现。函数节流可以通过设置一个定时器，在指定的时间间隔内执行目标函数。函数防抖可以通过设置一个定时器，在指定的时间间隔内只执行一次目标函数。 ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值