5 节流和防抖概念，手写，区别

最新推荐文章于 2024-09-25 09:25:07 发布
最新推荐文章于 2024-09-25 09:25:07 发布
阅读量990 收藏 3
点赞数
分类专栏： # js专题 文章标签： 节流和防抖 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abc1194474469/article/details/107359154
版权
本文详细探讨了JavaScript中的节流和防抖技术，包括它们的概念、手写实现、应用场景及区别。防抖能确保在频繁触发事件时只执行一次，而节流则限制执行频率，两者在处理如resize、scroll等持续触发的事件中非常有用。通过实例代码，阐述了防抖的非立即执行和立即执行版，以及节流的时间戳和定时器实现方式。
摘要由CSDN通过智能技术生成

 5 节流和防抖

参考多个博客写的，如果有侵权，请联系我

https://www.jianshu.com/p/c8b86b09daf0

5.1 防抖

1 防抖的概念

https://github.com/mqyqingfeng/Blog/issues/22

https://www.jianshu.com/p/c8b86b09daf0

防抖是防止事件多次调用。假设一个用户频繁触发某个事件，且每次触发事件的间隔小于wait，防抖的情况下只会调用一次。 （多次触发转化为一次触发）

2 手写防抖函数

1 非立即执行版和立即执行版

防抖函数分为非立即执行版和立即执行版。

非立即执行版：等到事件停止触发后才执行

立即执行版：立刻执行函数，然后等到停止触发wait时间后，才可以重新触发执行。

2 func.apply(context, args)函数

绑定this的作用：context（this）参数，保证使用防抖函数前后this指向一致

最低0.47元/天 解锁文章
bailizx
关注
专栏目录
如何在面试中手写出javascript节流和防抖函数
01-18
面试的时候我们经常会问别人是理解什么是节流和防抖，严格的可能要求你写出节流和防抖函数，这里我们抛开loadsh工具库手写节流和防抖 1.节流函数throttle // 节流方案1，每delay的时间执行一次，通过开关控制 ...
手写防抖和节流
@Juneberry的博客
11-30 1182
性能优化之防抖和节流
性能优化：手写防抖和节流以及二者的区别
KongKong_Rac的博客
09-13 948
防抖（debounce） 防抖（debounce）：限制事件被频繁触发。（涉及定时器和闭包） 触发事件时，在一定时间内，若没有再次触发事件，则事件处理函数在时间到达时执行一次； 若在一定时间内，又触发事件，则清除上一次的计时，重新开始计时，直到时间到了再执行函数。 应用：输入框校验，百度搜索出现提示文字功能等 场景：监听输入框，一旦文字变化，即触发keyup事件，则触发change事件，打印出输入框的内容。 防抖效果：用户输入结束或暂停时，才触发change事件。 <input type="text"
前端手写源码系列(一）—— 手写防抖和节流
weixin_46714216的博客
08-25 705
前端面经八股手戳源码系列，从底层带你实现防抖和节流，复盘应用场景
前端面试问题：手写节流和防抖，简述防抖和节流的区别及应用场景
weixin_44191250的博客
06-24 659
手写节流和防抖，简述防抖和节流的区别及应用场景
【JS基础】通俗易懂的讲清楚去抖/防抖、节流。外加手写深度比较
庞囧的博客
01-23 1047
好，我举个应用的例子你就更加明白了，页面上有个搜索框，用户在上面输入关键词，输入完后触发input事件，这时事件的处理逻辑就是发送异步请求去获取关键词的搜索结果。例如用户连续快速输入“广东省深圳市”，假如没有防抖机制，输入完后一共无规律的发送了6个接口，有了防抖机制，只发送了1次，就是用户输入完"市"停止1s的时候。除了优化【查】的操作，在【增删改】的接口调用时，如果以按钮之类的形式去触发，也一定要考虑到去抖的操作，当然这种情况不一定要使用去抖的写法，用个局部loading也是不错的选择。
什么是防抖和节流？有什么区别？如何实现？
shh4447的博客
08-14 258
什么是防抖和节流？有什么区别？如何实现？
手写防抖节流以及它们的区别
m0_74382023的博客
12-27 470
目的其实对于刚刚接触防抖节流的人来说，这两者好像常常一起说，而不是单拎出来说，实际上，他们是有区别的，针对的特定场景也不同,希望我的浅薄认知可以帮助到你相同点：其实都是用于处理函数触发频次过高的问题不同点：1.防抖是说在规定时间内如果再度触发了这个事件，那么之前的待执行事件将会终止，转而重新计时,大白话就是---规定时间内只执行一次，如果再度触发就终止并且重新计时。
JavaScript函数节流和函数防抖之间的区别
12-07
函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。 大家大概都知道旧款电视机的工作原理，就是一行行得扫描出色彩到屏幕上，然后组成一张张图片。由于肉眼只能分辨出一定频率的变化，当高频率的扫描，...
javaScript函数节流与防抖之区别
08-11
防抖和节流的主要区别在于，防抖是控制最后执行的时机，而节流则是控制执行的频率。防抖可以减少不必要的计算，尤其是在事件触发很频繁但不需要立即响应时；而节流则保证了在一定频率内的最少执行次数，适用于需要...
30_手写防抖节流-深拷贝-事件总线1
08-04
"手写防抖节流函数" 防抖和节流是前端开发中两个非常重要的概念，它们可以帮助我们解决频繁的事件处理问题，提高系统的性能。在本文中，我们将详细介绍防抖和节流的概念、原理、应用场景和实现过程。 防抖函数...
js代码-手写js节流
07-15
本篇文章将深入探讨JavaScript手写节流函数的核心原理和实现方式。 节流主要有两种策略：固定时间间隔节流和依赖事件间时间间隔节流。固定时间间隔节流是指在一段时间内，无论触发多少次事件，函数只执行一次。依赖...
手写防抖、节流，防抖和节流的区别 ？
最新发布
csdn_Levy的博客
09-25 144
如果一个函数持续地触发，那么只在它停止触发的一段时间后才执行，如果在这段时间内又开始持续触发，则重新计算时间。：如果一个函数持续地触发，那么固定在一段时间内只执行一次。
JS手写防抖和节流函数（超详细版整理）
m0_56698268的博客
03-27 6005
JavaScript手写防抖和节流函数，及应用场景优化
JS面试题---什么是节流和防抖？怎样手写一个自己的节流和防抖工具函数
2202_75922690的博客
02-08 1292
JS面试题---什么是节流和防抖，如何手写，他们之间有什么区别，分别有哪些应用场景
【前端面经】手写一个防抖、节流
Hlleo Wrold
05-23 40
特别是在处理频繁触发的事件时，如窗口调整大小、滚动、输入框输入等。这些技术可以提高性能和用户体验，避免不必要的函数调用。，如滚动、鼠标移动等。在这些场景中，函数应该在一定时间间隔内多次执行，但不会频繁地触发。防抖（Debounce）和节流（Throttle）是两种常见的。，不管这段时间内调用了多少次。（如搜索框实时查询），节流是一种确保函数在。
手写防抖和节流函数
zep
03-16 1万+
一、认识防抖debounce函数 我们用一副图来理解一下它的过程： 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间； 当事件密集触发时，函数的触发会被频繁的推迟； 只有等待了一段时间也没有事件触发，才会真正的执行响应函数； 防抖的应用场景很多： 输入框中频繁的输入内容，搜索或者提交信息； 频繁的点击按钮，触发某个事件； 监听浏览器滚动事件，完成某些特定操作； 用户缩放浏览器的resize事件； 总结：防抖其实是延迟函数的执行，只有当等待了一段时间也没有事件触发时，才会真正去执行函数 1.
防抖、节流的介绍
热门推荐
Dpl0216的博客
04-23 1万+
针一类类快速连续触发和不可控的高频触发问题，可以用节流和防抖。如通过滚动条的滚动来发起请求、通过输入文字来发起请求这一类的行为，下面用两个例子具体的给大家展示。
防抖节流打包
l_tsov的博客
12-11 697
防抖 function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ clearTimeout(timer) } timer = setTimeout(fn,delay) // 简化写法 } } // 然后是旧代码 function showTop () { var scrollTop = d.
js 手写防抖和节流函数
04-16
好的，我可以回答你关于 JavaScript 手写防抖和节流函数的问题。 先，防抖和节流函数是为了解决高频率触发某个事件时，减少事件触发的次数，提高性能而设计的。 防抖函数的作用是在某个函数触发后，延迟一定的时间再执行这个函数，若在延迟时间内，这个函数又被触发，则重新计时，最后只会执行一次这个函数。以下是防抖函数的示例代码： ```javascript function debounce(func, delay) { let timer = null; return function () { const context = this; const args = arguments; clearTimeout(timer); timer = setTimeout(function () { func.apply(context, args); }, delay); }; } ``` 节流函数的作用是在某个函数触发后，不立即执行这个函数，而是等到一定的时间后，才执行这个函数，若在等待时间内，这个函数又被触发，则忽略这个函数的执行。以下是节流函数的示例代码： ```javascript function throttle(func, delay) { let timer = null; return function () { const context = this; const args = arguments; if (!timer) { timer = setTimeout(function () { func.apply(context, args); timer = null; }, delay); } }; } ``` 以上就是 JavaScript 手写防抖和节流函数的基本实现方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值