性能优化之函数防抖动

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

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

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

先调用防抖

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

后调用防抖

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

应用场景

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

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

其他会频繁调用的函数等

总结

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

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

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

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

睿江云计算
关注
专栏目录
Android性能优化之OOM
是阿超
07-25 1170
什么是OOM？为什么会有OOM？App的内存限制是多少？为什么Android系统要设定App的内存限制？Android有GC自动回收资源，为什么还会OOM?容易发生OOM的场景及处理方案；如何避免OOM？
性能优化:防抖与节流
weixin_45435854的博客
12-30 715
防抖 在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。 这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。 防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。 function debounce(fn) { let ti
函数防抖
XYHplus的博客
11-27 472
什么是函数防抖？？ 其实就是防止函数短时间内被调用多次。就叫做函数防抖，.要完成该函数，需要给予两个条件： 告诉我一段时间后要做什么事（这里应该是一个 callback，即函数作为参数） 告诉我要等待多长时间 功能 调用该函数后，不立即做事，而是一段时间后去做事 如果在等待时间内调用了该函数，则重新开始计时 // 防抖函数 function debounce(fn, ms) { let timer = null; return function (
JS防抖函数的优化（优化立即执行与取消）
weixin_44368048的博客
12-02 1613
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 482
1.1-函数防抖 1.函数防抖介绍 1.什么是函数防抖？ （debounce） 网上主流解释：函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 参考博客：https://www.jianshu.com/p/f9f6b637fd6c 参考博客：https://segmentfault.com/a/1190000018445196 笔者解释： 先理解什么是抖动？：例如用户鼠标轻微晃动，快速划过某一个元素（用户本身不想触发，只是鼠标误触
js函数节流和去抖动
Aliguagua的博客
11-25 6930
搜索框下拉提示–js函数节流和去抖动 1.搜索框的事件监听 前几天做了一个类似百度的那种自动提示的搜索框，需要动态监听输入框值变化。使用onkeydown、onkeypress、onkeyup这些事件监听的话，是无法监听鼠标右键的复制、剪贴和粘贴操作的。使用oninput事件是可以解决鼠标右击操作的，但是oninput事件不完全兼容IE9，这时可以再绑定IE 特有的 onpropertyc
函数节流和防抖动
magicfly9527的专栏
05-25 1329
函数节流
【性能优化】函数的防抖与节流
jiang_ziY的博客
02-07 507
函数的防抖与节流都是为了优化函数执行频率,提高网页性能 - 防抖： 优化‘用户主动‘触发的事件， 多次触发以最后一次为准 - 节流： 优化‘事件本身’执行的频率， 间隔时间只执行一次
通过实例讲解JS如何防抖动
10-16
JavaScript中的防抖动（Debouncing）是一种优化技术，用于限制函数执行的频率，尤其是在处理高频率触发的事件，如窗口滚动、输入框输入等。防抖动的主要目的是避免在短时间内重复执行函数，减少不必要的计算，提高...
JavaScript 函数的防抖与节流
01-08
JavaScript中的函数防抖(debounce)和节流(throttle)是两种优化性能的策略，它们主要用于控制函数的执行频率，尤其在处理高频事件如resize、scroll、mousemove时效果显著。 **防抖(debounce)** 防抖的基本思想是...
解决抖动之函数防抖
qp66797的博客
09-08 667
函数的抖动：简单来说就是一个函数在短时间内大量频繁调用，但是很多次调用都不是必须的 在js中，哪些情况容易遇到抖动？ 到底哪些事件会频繁调用？ 鼠标移动事件 移入移出事件 input输入事件 滚动条滚动事件(onscroll) 尺寸改变事件(onresize) … 而很多次函数其实没必要调用，他都是无效执行，所以要想办法解决; 解决抖动之防抖 防抖：就是防止函数内的代码在短时间内大量执行，只让它最终执行一次 步骤： 把要执行的代码包到setTimeout里 在短时间内大量调用函数的时候，先把上一次的计时器清
js函数节流和函数防抖
weixin_30859423的博客
02-15 101
概念解释 函数节流: 频繁触发,但只在特定的时间内才执行一次代码 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码 函数节流 函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件。 以下是监听页面元素滚动的示例代码： // 函数节流 var canRun = true; document.getEle...
性能优化之函数防抖
qq_41620202的博客
07-04 133
所谓函数防抖就是让函数在触发时的n秒后执行，若函数被反复触发且触发间隔小于n秒，则函数会在最后一次触发时的n秒后执行一次 使用场景：搜索框输入并实时显示结果、鼠标滑过不同的菜单发出相应的ajax请求等。 举例 当鼠标在蓝色div内移动时，div内的数字加1 ...
函数防抖和函数节流
老实敲代码，佛只渡有缘人
03-15 230
无论是从网站的性能还是易用性方面，函数防抖和函数节流都是我们学习前端绕不开的内容，一些大厂的面试也经常会问到，下面我们就结合实例来看一下。 函数防抖 1.什么是函数防抖 要弄清函数防抖，我们就要知道函数为什么会抖，比如：有一个输入框，当我们每次输入数据的时候，就会触发change函数，继而会触发一系列的逻辑操作，这个还没什么，要是每次change都触发了接口，那就会大大降低网站的性能，消耗服务器的资源，在短时间内重复触发函数这种场景就是函数抖动。 那么函数防抖就出现了...
js中抖函数的封装
长江某菜鸟的博客
07-19 701
待……
去抖函数的总结
u010075920的博客
05-10 522
/*******************************防抖动的函数 参数: pinx:需要读取的引脚状态 data:赋值 div:赋值的偏移量 * Shake_count:防抖的计数*********************************/#define Shake_Min 1#define Shake_Mid 5#define Shake_Max 10void Shake_F...
一定能看懂的函数防抖与函数节流 降频
web修理工
05-20 189
函数防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。 debounce-函数防抖：将一个弹簧按下，继续加压，继续按下，只会在最后放手的一瞬反弹。即我们希望函数只会调用一次，即使在这之前反复调用它，最终也只会调用一次而已。 在进行窗口的resize、scroll，输入框内容校验等操作等高频率函数调用时 我们需要进行函数降频,这就是我们所说的防抖 // 滚动事件 let timer=null function friendList(){ console.log(Math.
2个div，hover处理，需要判断鼠标是否在一个div内
07-11 3518
var timer=null; $(".saveMore").mouseover(function(){ clearTimeout(timer); $('#save_more_layer').show(); }).mouseout(function(){ t
React 防抖动（debounce） Hook
1bite 的专栏
12-16 5623
防抖动 （debounce）是常见的需求，本文将演示两种方案应用 React Hooks 实现防抖。
优化React函数组件性能：详解React.memo与避免无用渲染
React 16.6引入了React.memo()，这是一个专门针对函数组件的性能优化工具。React.memo()是一个高阶组件，它会自动检查传入的props是否与上一次渲染时相同。如果props没有变化，React.memo()会返回之前的实例，从而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值