性能优化之函数防抖动

最新推荐文章于 2025-01-15 15:14:25 发布
最新推荐文章于 2025-01-15 15:14:25 发布
阅读量411 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 云服务器 云计算 文章标签： 函数防抖动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/RJ0024/article/details/90053287

函数防抖动是一种常见的优化高频率调用函数的手段，核心是把高频率调用的函数优化为在某一时间段内只调用一次

根据具体调用的时机可以分为两种，分别是先调用防抖以及后调用防抖

先调用防抖

先调用防抖是指先调用函数，然后等待一段时间，在等待时间结束后再进行下一次调用，如果在等待时间结束前发生了多次调用，则只会响应第一次。调用时间线如下所示
在这里插入图片描述
根据这个想法，可以大致得到如下代码
在这里插入图片描述

后调用防抖

后调用防抖则是先等待一段时间，在等待时间结束后调用函数，如果在等待时间结束前再次调用，则需重新计时并等待。调用时间线如下所示
在这里插入图片描述
在原有代码基础上进行修改，增加后调用的防抖动方法
在这里插入图片描述
将防抖动的代码合并一下，得到完整的防抖动代码
在这里插入图片描述

应用场景

keyup、keydown等频繁触发的事件监听

表单验证、输入搜索、点击搜索

其他会频繁调用的函数等

总结

函数防抖动本质上是检测前后两次连续间隔内的函数调用，把时间间隔内的多次函数调用合并成一次，从而实现对频繁调用的函数的优化

先调用防抖是立即执行时间间隔内的第一次函数调用，应用场景相对较少

后调用防抖是执行时间间隔内的最后一次函数调用，应用场景相对较多

在这里插入图片描述文章来自公众号：睿江云计算
睿江云计算官网：http://www.eflycloud.com/home?from=RJ_0024

Android性能优化之OOM
是阿超
07-25 1458
什么是OOM？为什么会有OOM？App的内存限制是多少？为什么Android系统要设定App的内存限制？Android有GC自动回收资源，为什么还会OOM?容易发生OOM的场景及处理方案；如何避免OOM？
函数防抖
XYHplus的博客
11-27 517
什么是函数防抖？？ 其实就是防止函数短时间内被调用多次。就叫做函数防抖，.要完成该函数，需要给予两个条件： 告诉我一段时间后要做什么事（这里应该是一个 callback，即函数作为参数） 告诉我要等待多长时间 功能 调用该函数后，不立即做事，而是一段时间后去做事 如果在等待时间内调用了该函数，则重新开始计时 // 防抖函数 function debounce(fn, ms) { let timer = null; return function (
JS防抖函数的优化（优化立即执行与取消）
weixin_44368048的博客
12-02 1739
JS防抖函数的进一步优化之立即执行与取消 function debounce(fn, delay) { let timer = null; return function (...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay)...
网页性能优化03-函数防抖
坤小的专栏
05-23 530
1.1-函数防抖 1.函数防抖介绍 1.什么是函数防抖？ （debounce） 网上主流解释：函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 参考博客：https://www.jianshu.com/p/f9f6b637fd6c 参考博客：https://segmentfault.com/a/1190000018445196 笔者解释： 先理解什么是抖动？：例如用户鼠标轻微晃动，快速划过某一个元素（用户本身不想触发，只是鼠标误触
js函数节流和去抖动
Aliguagua的博客
11-25 7070
搜索框下拉提示–js函数节流和去抖动 1.搜索框的事件监听 前几天做了一个类似百度的那种自动提示的搜索框，需要动态监听输入框值变化。使用onkeydown、onkeypress、onkeyup这些事件监听的话，是无法监听鼠标右键的复制、剪贴和粘贴操作的。使用oninput事件是可以解决鼠标右击操作的，但是oninput事件不完全兼容IE9，这时可以再绑定IE 特有的 onpropertyc
函数节流和防抖动
magicfly9527的专栏
05-25 1384
函数节流
【性能优化】函数的防抖与节流
jiang_ziY的博客
02-07 557
函数的防抖与节流都是为了优化函数执行频率,提高网页性能 - 防抖： 优化‘用户主动‘触发的事件， 多次触发以最后一次为准 - 节流： 优化‘事件本身’执行的频率， 间隔时间只执行一次
通过实例讲解JS如何防抖动
10-16
JavaScript中的防抖动（Debouncing）是一种优化技术，用于限制函数执行的频率，尤其是在处理高频率触发的事件，如窗口滚动、输入框输入等。防抖动的主要目的是避免在短时间内重复执行函数，减少不必要的计算，提高...
JavaScript前端高效性能优化策略：防抖和节流的详细介绍
weixin_43312391的博客
01-15 1496
防抖和节流是我们前端开发性能优化中经常用到的一个手段，目的就是为了减少/限制函数执行的频率，用来提升系统性能和用户体验。本篇文章将深入探讨防抖和节流这两种函数优化手段，防抖在函数频繁触发时只在最后一次且规定时间内无再次触发才执行，节流则在给定时间间隔内最多执行一次。有大佬以游戏为喻，将防抖技术形象地比作游戏中的【回城】功能。想象一下，当你按下回城键，角色开始返回基地，但如果在途中被敌人打断，回城动作便会重置，重新开始计算。
JavaScript 函数的防抖与节流
01-08
JavaScript中的函数防抖(debounce)和节流(throttle)是两种优化性能的策略，它们主要用于控制函数的执行频率，尤其在处理高频事件如resize、scroll、mousemove时效果显著。 **防抖(debounce)** 防抖的基本思想是...
解决抖动之函数防抖
qp66797的博客
09-08 721
函数的抖动：简单来说就是一个函数在短时间内大量频繁调用，但是很多次调用都不是必须的 在js中，哪些情况容易遇到抖动？ 到底哪些事件会频繁调用？ 鼠标移动事件 移入移出事件 input输入事件 滚动条滚动事件(onscroll) 尺寸改变事件(onresize) … 而很多次函数其实没必要调用，他都是无效执行，所以要想办法解决; 解决抖动之防抖 防抖：就是防止函数内的代码在短时间内大量执行，只让它最终执行一次 步骤： 把要执行的代码包到setTimeout里 在短时间内大量调用函数的时候，先把上一次的计时器清
js函数节流和函数防抖
weixin_30859423的博客
02-15 132
概念解释 函数节流: 频繁触发,但只在特定的时间内才执行一次代码 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码 函数节流 函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件。 以下是监听页面元素滚动的示例代码： // 函数节流 var canRun = true; document.getEle...
性能优化之函数防抖
qq_41620202的博客
07-04 172
所谓函数防抖就是让函数在触发时的n秒后执行，若函数被反复触发且触发间隔小于n秒，则函数会在最后一次触发时的n秒后执行一次 使用场景：搜索框输入并实时显示结果、鼠标滑过不同的菜单发出相应的ajax请求等。 举例 当鼠标在蓝色div内移动时，div内的数字加1 ...
函数防抖和函数节流
老实敲代码，佛只渡有缘人
03-15 285
无论是从网站的性能还是易用性方面，函数防抖和函数节流都是我们学习前端绕不开的内容，一些大厂的面试也经常会问到，下面我们就结合实例来看一下。 函数防抖 1.什么是函数防抖 要弄清函数防抖，我们就要知道函数为什么会抖，比如：有一个输入框，当我们每次输入数据的时候，就会触发change函数，继而会触发一系列的逻辑操作，这个还没什么，要是每次change都触发了接口，那就会大大降低网站的性能，消耗服务器的资源，在短时间内重复触发函数这种场景就是函数抖动。 那么函数防抖就出现了...
函数去抖（debounce）和 函数节流（throttle）库
黄彪博客
06-16 1138
抖动函数和节流函数 文章目录参考抖动函数和节流函数的区别？debounce去抖throttle节流 参考 带你一起来理解：函数去抖（debounce）和 函数节流（throttle）的作用和区别 抖动函数和节流函数的区别？ 抖动函数：强制一个函数不被重复调用直到等待指定时间已经过去并且等待期间没有被调用。例如在距离上次调用之后100毫秒后才能调用下一次函数。 节流函数：节流会强制规定在单位时间内一个函数调用的最大次数。例如每过100毫秒至少执行一次这个函数。 debounce去抖 定义：
js中抖函数的封装
长江某菜鸟的博客
07-19 741
待……
去抖函数的总结
u010075920的博客
05-10 580
/*******************************防抖动的函数 参数: pinx:需要读取的引脚状态 data:赋值 div:赋值的偏移量 * Shake_count:防抖的计数*********************************/#define Shake_Min 1#define Shake_Mid 5#define Shake_Max 10void Shake_F...
一定能看懂的函数防抖与函数节流 降频
web修理工
05-20 239
函数防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。 debounce-函数防抖：将一个弹簧按下，继续加压，继续按下，只会在最后放手的一瞬反弹。即我们希望函数只会调用一次，即使在这之前反复调用它，最终也只会调用一次而已。 在进行窗口的resize、scroll，输入框内容校验等操作等高频率函数调用时 我们需要进行函数降频,这就是我们所说的防抖 // 滚动事件 let timer=null function friendList(){ console.log(Math.
2个div，hover处理，需要判断鼠标是否在一个div内
07-11 3623
var timer=null; $(".saveMore").mouseover(function(){ clearTimeout(timer); $('#save_more_layer').show(); }).mouseout(function(){ t
防抖动事件
最新发布
05-05
### 防抖动事件的实现与应用 #### 实现原理 防抖（Debounce）是一种通过设定延迟时间来限制函数执行的技术。其核心在于，当某事件被触发时，不会立即执行绑定的回调函数，而是等待指定的一段时间后再执行；如果在这段时间内事件再次被触发，则重新计时并推迟执行。这种机制能够有效减少因高频事件引发的性能开销。 以下是基于 JavaScript 的防抖函数实现方式： ```javascript function debounce(func, wait) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), wait); }; } ``` 此代码片段定义了一个通用的 `debounce` 函数[^3]。它接收两个参数：目标函数 `func` 和延迟时间 `wait`（单位为毫秒）。每当事件触发时，都会清除之前的定时器，并设置一个新的定时器，在经过指定的时间间隔后执行目标函数。 --- #### 应用场景 防抖技术广泛应用于各种需要降低高频率操作影响的场景中，主要包括以下几个方面： 1. **搜索框输入联想** 用户在搜索框中输入文字时，通常会伴随大量的键盘事件触发。如果不加以控制，每次按键都将发起一次网络请求或复杂计算，这不仅浪费资源还可能导致界面卡顿。利用防抖技术，可以在用户停止输入一段时间之后再发送请求，从而显著提升效率。 2. **页面滚动加载更多** 当用户向下滚动网页至底部时，可能希望动态加载新内容。然而，滚动事件本身非常频繁，直接绑定加载逻辑会造成大量无意义的操作。借助防抖方法，可以确保仅在用户完全停下滚动动作后的特定时刻才启动新的数据获取流程[^3]。 3. **窗口大小调整监听** 调整浏览器窗口尺寸同样会产生密集的 resize 事件通知。为了防止这些事件过度消耗 CPU 时间片，可以通过防抖手段延缓响应速度，使得最终效果既满足需求又兼顾性能表现[^1]。 --- #### 使用示例 下面展示了一种实际运用防抖技巧的例子——监控表单字段变化情况： ```html <input type="text" id="searchBox"> <script> const searchBox = document.getElementById('searchBox'); // 定义查询接口模拟函数 function performSearch(query) { console.log(`Searching for "${query}"`); } // 创建带防抖特性的处理器 const handleInputChange = debounce((event) => { const query = event.target.value.trim(); if (query.length > 0) { performSearch(query); } }, 500); // 绑定到 input 事件上 searchBox.addEventListener('input', handleInputChange); </script> ``` 在此案例里，我们为文本框绑定了一个经由 `debounce` 封装过的事件监听程序。这样即使用户快速敲击多个字符也不会立刻触发展示行为，而要等到他们暂停打字至少半秒钟才行[^3]。 --- ### 总结 综上所述，JavaScript 中的防抖功能是一项极其重要的工具，可以帮助开发者应对那些容易引起系统负担过高或者用户体验下降的情况。无论是针对实时交互还是异步通信环节，合理采用此类优化措施都能带来明显的改善作用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值