前端性能优化点--防抖节流

news2024/11/14 17:11:58

防抖debounce

防抖函数指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次。
假如我们设置了一个等待时间 3 秒的函数,在这 3 秒内如果遇到函数调用请求就重新计时 3 秒,直至新的 3 秒内没有函数调用请求,此时执行函数,不然就以此类推重新计时。

防抖原理示例图

就是当事件触发后开启一个定时器,如果事件在这个定时器限定的时间内再次触发,则清除定时器,再写一个定时器,定时时间到则触发。 

function debounce(fn, delay){
	let timer = null;
	return function(){
		clearTimeout(timer);
		timer = setTimeout(()=> {
			fn.apply(this, arguments);
		}, delay)
	}
}

节流throttle

函数节流指的是某个函数在一定时间间隔内(例如 3 秒)执行一次,在这 3 秒内 无视后来产生的函数调用请求。 

防抖原理示例图

即可以设计一种类似控制阀门一样定期开放的函数,事件触发时让函数执行一次,然后关闭这个阀门,过了一段时间后再将这个阀门打开,再次触发事件。

function throttle(fn, delay){
	let valid = true;
	return function(){
		if(valid) { //如果阀门已经打开,就继续往下
			setTimeout(()=> {
				fn.apply(this, arguments);//定时器结束后执行
				valid = true;//执行完成后打开阀门
			}, delay)
			valid = false;//关闭阀门
		}
	}
}
// 刚开始valid为true,然后将valid重置为false,进入了定时器,在定时器的时间期限之后,才会将valid重置为true,valid为true之后,之后的点击才会生效
// 在定时器的时间期限内,valid还没有重置为true,会一直进入return,就实现了在N秒内多次点击只会执行一次的效果

//用法:
function fn(value){
  console.log(value);
}
var throttleFunc = throttle(fn,2000);//节流函数
 //事件处理函数,按钮点击事件
btn.addEventListener("click",function(){    
    throttleFunc(Math.random());// 给节流函数传参
})

应用场景

防抖

  • search搜索联想,用户在不断输入值时,用防抖来节约请求资源
  • window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次

节流 

  • 鼠标不断点击触发,mousedown(单位时间内只触发一次)
  • 监听滚动事件,比如是否滑到底部自动加载

总结

相同点

防抖和节流都是为了阻止操作高频触发,从而浪费性能

区别

  • 防抖是触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。适用于可以多次触发但触发只生效最后一次的场景
  • 节流是高频事件触发,但在n秒内只会执行一次,如果n秒内触发多次函数,只有一次生效,节流会稀释函数的执行频率

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/456550.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

关于package.json中版本锁定的方法和问题解决

前置知识:先了解一下package.json和package-lock.json的关系和区别,请看这篇文章 然后我们来说一下改怎么锁定版本? 首先肯定是要把package.json中的 ^ 这个符号去掉,但是如果你只去掉package.json中的 ^那就太天真了&#xff0…

ESP32的VSPI和HSPI

说明 SPI共有4根线,MOSI、MISO、CS、CLK,在ESP32中对应规则如下表: ESP32共有4个SPI,但是用户能够使用的只有2个SPI,分为VSPI和HSPI。 引脚接口 在ESP32的数据手册中,说明了VSPI和HSPI对应的引脚&…

薪资结构重铸: Zebec将业务范围扩大到Web2薪资管理领域

通过收购美国支付公司PayBridge,Zebec的流支付技术正在扩展到企业级薪酬发放平台。 近日,流支付协议Zebec Protocol宣布,其通过美国投资机构Payroll Growth Partners(PGP)收购了Web2薪酬管理公司PayBridge。PayBridge总…

和月薪5W的阿里程序员聊过后,才知道自己一直在打杂...

前几天和一个朋友聊面试,他说上个月同时拿到了腾讯和阿里的offer,最后选择了阿里。 阿里内部将员工一共分为了14个等级,P6是资深工程师,P7是技术专家。 其中P6和P7就是一个分水岭了,P6是最接近P7的不持股员工&#x…

完整的生产车间管理流程是怎样的?六大步骤分享

阅读本文您将了解:1.生产车间管理的特征;2.生产车间管理流程具体步骤;3.生产车间管理流程规范的重要性。 一、生产车间管理的特征 车间管理是指对车间所从事的各项生产经营活动进行计划、组织、指挥、协调和控制的一系列管理工作。生产车间…

FE_TA不知道的CSS 换行系列【2】word-break word-wrap

从这个名字可以知道,这个属性是控制单词如何被拆分换行的。它有三个值:normal | break-all | keep-all。 1 word-break:keep-all 所有“单词”一律不拆分换行,注意,我这里的“单词”包括连续的中文字符(还有日文、韩…

Web 学习笔记 - 网络安全

前言 Web 安全方面的基本知识是有很必要的,未必就要深入理解。本文主要介绍常见的网络攻击类型,不作深入探讨。 正文 网络攻击的形式种类繁多,从简单的网站敏感文件扫描、弱口令暴力破解,到 SQL 注入,再到复杂的网络…

2023-04-24 Nginx基本使用

Nginx 文章目录 Nginx1.Nginx安装2.Nginx命令3.静态资源3.2 解决403问题3.3 root与alias区别 4.反向代理/负载均衡4.1 正向代理4.2 反向代理4.3 负载均衡策略 5.动静分离 1.Nginx安装 1.上传解压Nginx压缩包 2.先安装所需依赖包 yum -y install pcre-develyum -y install ope…

Flink+Pulsar、Kafka问题分析及方案

背景 消息队列如Kafka、Pulsar利用事务特性所提供的exactly once语义,只能在特定使用场景 consume-transform-produce 下保证,即一个事务同时包含了生产和消费,利用事务的原子性,事务中的操作包含sink端的生产和source端的offset提…

从STL的视角,了解下Map、Set、Tuple和Initializer_List的区别

📖作者介绍:22级树莓人(计算机专业),热爱编程<目前在c++阶段>——目标Windows,MySQL,Qt,数据结构与算法,Linux,多线程&…

React-Native启动页

本文将从 Android 和 IOS 两端分别详细介绍APP是如何设置名称、图标以及启动页的。 首先我们到 图标工厂 上传一张 1024x1024 的图标,然后一键生成所有尺寸的图标,下载下来供两端使用。 IOS端 设置名称 在 Xcode 中点击你的项目修改右侧 Display Name …

深入浅出MySQL——MySQL基础

文章目录 数据库基础数据库概念主流数据库服务器,数据库,表关系基本使用MySQL架构SQL语句分类存储引擎 库的操作创建数据库创建数据库案例字符集和校验规则操纵数据库 表的操作创建表查看表结构修改表删除表 数据类型数据类型分类数值类型字符串类型 表的…

【华为机考】专题突破 第一周:单调栈 739 、503 、901、84

刷题顺序参考于 《2023华为机考刷题指南:八周机考速通车》 前言 单调栈:分为单调递增和单调递减栈。(栈内元素成递增或者递减性): 单调递增栈:从栈底到栈顶数据是从大到小,即 栈内的元素从栈顶 到栈底 是递增的&#x…

react-10 函数式写法rsc,配合HOOKS钩子函数

性能优化:useMemo :用于组件性能优化(缓存计算属性,变化才执行)是通过缓存值的方式实现性能优化 useMemo(callback, array):性能优化,利用了闭包的特性,会返回一个记忆值, 通过 记…

3D线光谱共焦位移传感器在医疗领域的应用

随着社会的发展,越来越多的行业对微观物体表面形貌的观察提出了越来越高的要求。与生命健康息息相关的医疗行业就是其中之一。但是传统的显微镜只能达到聚焦区域的图像清晰,非聚焦区域图像模糊。因此,普通显微镜无法在相同景深下实现对物体表…

两大消息爆出,币圈正在响应全球“去美元化”行动

为了维持美元霸权、对全球进行收割,美联储连续加息反而拉爆了自家银行。欧美银行危机事件,让人们觉得把钱放在银行里并不安全,加密货币的去中心化本质,令币圈逆风翻盘。数据显示,比特币今年上涨了近72%,这可…

《编码——隐藏在计算机软硬件背后的语言》精炼——第12章(二进制加法器)

“I hear and I forget. I see and I remember. I do and I understand”——Confucius 人类计算二进制数的方法 我们先计算本位的结果,称为加法位;再计算是否进位,称为进位位。 搭建二进制加法器 我们用逻辑门来搭建二进制加法器。它的思想…

CHAPTER 8: 《DESIGN A URL SHORTENER》第8章 《设计一个url伸缩器》

CHAPTER 8: DESIGN A URL SHORTENER 在这一章中,我们将解决一个有趣而经典的系统设计面试问题:设计一个像tinyurl这样的网址缩短服务。 步骤1 -理解问题并确定设计范围 系统设计面试的问题是故意留下开放式的。精心设计系统中,提出澄清性问题是至关重…

HDCTF 2023 复盘

web yamiyami 当时考虑直接读的/proc/self/environ 读到flag是not_flag 就没考虑过/proc/1/environ了 然后不知道py3URL二次编码的特性,读不到源码,无从下手 做flask算pin码的题做多了,还以为pid是1的就是self,难顶 上面那种是非预期 预期是yaml反序列化 先读源码 /read?u…

产品推荐丨智慧水利行业应用终端+云平台

智慧水利是我国智慧城市建设的重要延伸,是新时代水利现代化的战略目标,贯穿于防汛抗旱减灾、水资源合理配置和高效利用、水资源和河湖健康保障等体系。随着水利技术的集成发展与场景的成熟应用,我国水利现已完成从自动化阶段到信息化阶段的过…