当前位置:网站首页>防抖和节流有什么区别,分别用于什么场景?
防抖和节流有什么区别,分别用于什么场景?
2022-07-30 18:40:00 【小萌新入场】
防抖
防抖:单位时间内多次点击,以最后一次为准。
形象的描述:王者里的回城,只要被打断就需要重新来(单位时间内,多次触发,且以最后一次为准)
例如:一个搜索输入框,用户不停的进行输入(这个时候就是抖动的过程),等用户输入停止之后,再触发搜索。
代码演示
function debounce(fn, delay = 200) {
let timer = 0
return function() {
// 如果这个函数已经被触发了
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments); // 透传 this和参数
timer = 0
},delay)
}
}
节流
节流:单位时间内只触发一次,以第一次为准。
形象的描述下:想象一下王者荣耀的平a;或者技能CD冷却时间也好理解(单位时间内,只能触发一次,且以第一次为准)
例如:王者游戏里的英雄,你一个劲的使劲平a,会发现每次平a 过后都要短暂的停留一下,这就可以做到节流。
回归正题:drag(拖动)事件或者 scroll(滚动) 期间触发某个回调,要设置一个时间间隔。这时候就不能使用防抖了,为什么呢?
防抖是拖拽或者滚动结束之后才返回回调,但是我是需要在过程中进行触发回调,但是又不需要那么的频繁;这时候就使用节流函数,每隔一定的时间进行触发就好了!
代码演示
// 节流函数
function throttle(fn, delay = 200) {
let timer = 0
return function () {
if(timer){
return
}
timer = setTimeout(() =>{
fn.apply(this, arguments); // 透传 this和参数
timer = 0
},delay)
}
}
你可能会发现,防抖函数、节流函数很相似?
区别仅在于:
防抖:
if(timer){
clearTimeout(timer)
}
节流:
if(timer){
return
}
他们在定时器已经有任务的时候,操作不同。
防抖函数在每一次都有内容后进行清除,是为了保证当前执行的函数就是(当前规定的时间内)执行的最后一次操作
if(timer){
clearTimeout(timer)
}
节流函数如此操作是为了保证,在规定的时间内只会执行第一次这个操作
if(timer){
return
}
总结
遇到防抖,就想起王者荣耀里的 回城;
遇到节流,就想起王者荣耀里的 平a、技能cd冷却时间;
边栏推荐
- Node encapsulates a console progress bar plugin
- AI基础:图解Transformer
- 延时队列优化 (2)
- AI Basics: Graphical Transformer
- 深化校企合作 搭建技术技能人才成长“立交桥”
- natural language processing nltk
- requet.getHeader(“token“) 为null
- while,do while,for循环语句
- 【Pointing to Offer】Pointing to Offer 22. The kth node from the bottom in the linked list
- 设计消息队列存储消息数据的 MySQL 表格
猜你喜欢
After 23 years of operation, the former "China's largest e-commerce website" has turned yellow...
网络基础(二)-Web服务器-简介——WampServer集成服务器软件之Apache+MySQL软件安装流程 & netstat -an之检测计算机的端口是否占用
图解LeetCode——11. 盛最多水的容器(难度:中等)
[Summary] 1396- 60+ VSCode plugins to create a useful editor
Pytorch基础--tensorboard使用(一)
3D机器视觉厂商的场景争夺战役
OSPF详解(3)
kotlin by lazy
【HMS core】【Analytics Kit】【FAQ】如何解决华为分析付费分析中付款金额显示为0的问题?
Graphic LeetCode -- 11. Containers of most water (difficulty: medium)
随机推荐
OMP: Error #15: Initializing libiomp5md.dll, but found libiomp5md.dll already initialized.解决方法
Anaconda Navigator卡在loading applications
Scrapy框架介绍
ESP8266-Arduino programming example-HC-SR04 ultrasonic sensor driver
natural language processing nltk
好未来单季营收2.24亿美元:同比降84% 张邦鑫持股26.3%
Network Basics (3) 01-Basic Concepts of Networks - Protocols, Host Addresses, Paths and Parameters of URL Addresses & 127.0.0.1 Local Loopback Address & View URL IP Address and Access Ping Space + URL
CCNA-ACL(访问控制列表)标准ACL 扩展ACL 命名ACL
终端分屏工具Terminalx的使用
[OC study notes] attribute keyword
微信小程序云开发 | 城市信息管理
NC | 西湖大学陶亮组-TMPRSS2“助攻”病毒感染并介导索氏梭菌出血毒素的宿主入侵...
MySQL数据类型
毕业1年从事软件测试拿下11.5k,没有给98后丢脸吧...
requet.getHeader("token") is null
ESP8266-Arduino编程实例-HC-SR04超声波传感器驱动
猎豹移动终于递交年报:年营收7.85亿 腾讯持股16.6%
银行适用:此文能够突破你的运维流程管理问题
常见链表题及其 Go 实现
原生js系列