前端优化 - 防抖和节流

📢 鸿蒙专栏:想学鸿蒙的,冲

📢 C语言专栏:想学C语言的,冲

📢 VUE专栏:想学VUE的,冲这里

📢 CSS专栏:想学CSS的,冲这里

📢 Krpano专栏:想学VUE的,冲这里

🔔 上述专栏,都在不定期持续更新中!!!!!!!!!!!!!

目录

✨ 前言

防抖(debounce)

节流(throttle)

✨ 结语


✨ 前言

        在前端开发中,我们经常需要绑定处理函数到一些频繁触发的事件上,如scroll、resize、input等。如果事件处理函数执行频率过高,会对页面性能产生很大影响。  

防抖(debounce)

        防抖的原理是:触发事件后,延迟一段时间执行处理函数,如果在延迟时间内再次触发事件,会重新开始延时。

防抖可以使用的场景:

  • 输入框实时搜索Suggest
  • 窗口resize时调整样式

示例代码:

function debounce(func, delay) {let timer = null;return function() {clearTimeout(timer);timer = setTimeout(() => {func(); }, delay);}
}// 输入框搜索uggest
const search = debounce(() => {// 获取输入值后请求suggest
}, 500);input.addEventListener('input', search);

      

防抖的一般实现步骤:

1、创建一个延迟调用方法,使用闭包保存需要执行的函数

function debounce(func, delay) {let timeout;return function() {// 保存函数执行上下文和参数,传递给延迟函数}}

2、每次事件触发时,都清除之前的延时调用

function debounce(func, delay) {let timeout;return function() {clearTimeout(timeout);// 省略}}

3、设置一个新的延时调用

function debounce(func, delay) {let timeout;return function() {clearTimeout(timeout);timeout = setTimeout(() => {func();}, delay);}}

4、考虑附加参数并返回函数调用结果

function debounce(func, delay) {return function(...args) {clearTimeout(timeout);timeout = setTimeout(() => {return func(...args);}, delay);}}

返回一个可以取消延时的函数

function debounce(func, delay) {let timeout;return function(...args) {clearTimeout(timeout);timeout = setTimeout(() => {func(...args);}, delay);return () => clearTimeout(timeout);}}

        这样就实现了一个功能较完整的防抖函数,在不断调用时只执行最后一次,并可以通过返回的函数取消延迟。

节流(throttle)

        节流的原理是:触发事件一段时间内只执行一次处理函数。

节流可使用的场景:

  • 滚动加载更多内容
  • 限制按钮提交频率

示例代码:

function throttle(func, delay) {let prev = 0;return function() {let now = Date.now();if (now - prev > delay) {func();prev = now;}}
}// 滚动加载更多
window.addEventListener('scroll', throttle(() => {//请求加载更多数据
}, 500));

 来关于节流函数,我也给出一些更完整和详细的实现思路:

1、创建一个可以保存执行时间和方法的闭包

function throttle(func, delay) {let lastTime;return function() {// 保留函数执行上下文和参数}}

2、每次事件触发,比较当前时间和上次时间

function throttle(func, delay) {let lastTime = Date.now();return function() {let now = Date.now();if (now - lastTime > delay) {// 函数处理逻辑}}}

3、在时间差大于阈值时,执行函数并更新最后时间

function throttle(func, delay) {let lastTime = Date.now();return function() {let now = Date.now();if (now - lastTime > delay) {func();lastTime = now; }}}

4、考虑附加参数并返回函数执行结果

function throttle(func, delay) {return function(...args) {// 时间比较逻辑return func(...args);}}

5、返回取消延时的方法

function throttle(func, delay) {let timeout;// 实现逻辑  return () => clearTimeout(timeout); }

这样就实现了一个具有基本功能的节流函数,它可以帮助我们限制函数执行频率,避免过快调用。

✨ 结语

防抖和节流都是优化高频率执行事件的技巧。区别在于:

  • 防抖是将多次执行变为最后一次执行
  • 节流是将多次执行变成每隔一段时间执行

根据需要选用合适的方式,可以有效避免页面过渡渲染,提升性能。

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

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

相关文章

使用Go-Gin框架实现 OSS 前端直传功能

引言 在现代 Web 应用中,文件上传是一项常见功能。传统的上传方式通常需要文件经过后端服务器转发到对象存储服务(如阿里云 OSS)。然而,这种方法可能对服务器造成额外的负担,并降低上传效率。本文将探讨如何使用 Go-G…

Harmony全局应用生命周期 EntryAbility.ts 讲解

之前 我们说过 page页面的生命周期 组件的生命周期 其实他和uni一样有一个整个应用的生命周期 我们如下图打开EntryAbility.ts 这是我们整个程序app的状态控制 他这里也有几个全局的生命周期 比如 我们手机 点开当前 App 启动 app 会触发 它的 onCreate 生命周期 当我们从手…

Elasticsearch 8.X进阶搜索之“图搜图”实战

Elasticsearch 8.X “图搜图”实战 1、什么是图搜图? "图搜图"指的是通过图像搜索的一种方法,用户可以通过上传一张图片,搜索引擎会返回类似或者相关的图片结果。这种搜索方式不需要用户输入文字,而是通过比较图片的视…

米贸搜|LinkedIn和Facebook在营销上有哪些区别?

一、领英做营销有哪些优势? 领英为什么受到很多营销人员的欢迎呢?因为领英的功能和大多数的社交平台都有所不同,自然在做营销这一方面也有其他平台所不能达到的优势,在这里也为大家总结了几点: 1、领英是一个专业的职场社交平台…

前端八股文(工程化篇)

目录 1.常用的git命令有哪些? 2.git rebase和git merge的区别 3.有哪些常见的Loader和Plugin? 4.webpack的构建流程 5.bundle,chunk,module是什么? 6.如何提高webpack的打包速度 7.vite比webpack快在哪里 8.说一下你对Monorepo的理解 …

MySQL MVCC精讲

版本链 我们前面说过,对于使用InnoDB存储引擎的表来说,它的聚簇索引记录中都包含两个必要的隐藏列(row_id并不是必要的,我们创建的表中有主键或者非NULL的UNIQUE键时都不会包含row_id列): trx_id&#xff…

GBASE南大通用-GBase 8s分片表操作 提升大数据处理性能

目录 一、GBase 8s分片表的优势 二、六种分片方法 轮转 1.轮转法 基于表达式分片 2.基本表达式 3.Mod运算表达式 4.Remainder关键字方式 5.List方式 6.interval 固定间隔 三、分片表的索引 1.创建索引的注意事项 2.detach索引替代delete功能展现 3.在现有分片表上增加一个新…

状态模式-概述

在软件系统中,有些对象也像水一样具有多种状态,这些状态在某些情况下能够相互转换, 而且对象在不同的状态下也将具有不同的行为。相同的方法在不同的状态中可能会有不同的实现。 为了实现不同状态下对象的各种行为以及对象状态之间的相互转换…

【Apache Doris】自定义函数之 JAVA UDF 详解

【Apache Doris】自定义函数之 JAVA UDF 详解 一、背景说明二、原理简介三、环境信息3.1 硬件信息3.2 软件信息 四、IDE准备五、JAVA UDF开发流程5.1 源码准备5.1.1 pom.xml5.1.2 JAVA代码 5.2 mvn打包5.2.1 clean5.2.2 package 5.3 函数使用5.3.1 upload5.3.2 使用 六、注意事…

2023年03月18日_微软office365 copilot相关介绍

文章目录 Copilot In WordCopilot In PowerpointCopilot In ExcelCopilot In OutlookCopilot In TeamsBusiness Chat1 - copilot in word2 - copilot in excel3 - copilot in powerpoint4 - copilot in outlook5 - copilot in teams6 - business chat word 1、起草草稿 2、自动…

JavaScript使用教程(二):类型、值和变量

计算机程序通过操作值(如数值3.14)或文本(如“Hello World”)来工作。编程语言中这些可以表示和操作的值被称为类型,而一门语言支持的类型集也是这门语言最基本的特征。程序在需要把某个值保存下来以便将来使用时&…

腾讯云系统盘50G通用型SSD云硬盘不够用怎么办?

腾讯云服务器系统盘50G通用型SSD云硬盘不够用怎么办?可以云硬盘扩容,也可以挂载数据盘。腾讯云服务器的系统盘可以不停服在线扩容,数据存储也可以通过挂载数据盘来实现更大的容量空间。腾讯云百科txybk.com分享腾讯云服务器系统盘不够用的操作…

2023 年终总结

引言 先说 2022 年留下的期待完成情况 健身,经过教练的指导后,自己开始做计划锻炼了,逐渐掌握到健身的要领:脸皮厚。 读书:今年可以说是读书最多的一年了,书单很长 旅行:去了上海,哈…

HTML5 Canvas 面试题

HTML5 Canvas 面试题 什么是HTML5 Canvas&#xff1f; Canvas是HTML5提供的一个绘图API&#xff0c;它允许通过JavaScript在网页上动态绘制图形、图像以及进行图形处理。 如何在HTML中创建一个Canvas元素&#xff1f; 使用<canvas>标签即可创建一个Canvas元素&#xff0…

VSCODE 修改Test模式下的的java jvm堆内存大小

在settings.json中添加如下语句 "java.test.config": {"vmArgs": ["-Xmx12G"]},

LeetCode75| 单调栈

目录 739 每日温度 901 股票价格跨度 739 每日温度 求后面第一个比他大的元素的位置&#xff0c;单调栈需要递增 求后面第一个比他小的元素的位置&#xff0c;单调栈需要递减 本题栈头到栈底的顺序应该从小到大 class Solution { public:vector<int> dailyTemperatures…

k8s中DaemonSet实战详解

一、DaemonSet介绍 DaemonSet 的主要作用&#xff0c;是在 Kubernetes 集群里&#xff0c;运行一个 Daemon Pod。DaemonSet 只管理 Pod 对象&#xff0c;然后通过 nodeAffinity 和 Toleration 这两个调度器参数的功能&#xff0c;保证了每个节点上有且只有一个 Pod。 二、Daem…

软件测试/测试开发丨Python 内置库 正则表达式re

什么是正则表达式 正则表达式就是记录文本规则的代码可以查找操作符合某些复杂规则的字符串 使用场景 处理字符串处理日志 在 python 中使用正则表达式 把正则表达式作为模式字符串正则表达式可以使用原生字符串来表示原生字符串需要在字符串前方加上 rstring # 匹配字符…

面试算法:归并排序

题目 归并排序也是一种基于分治法的排序算法。为了排序长度为n的数组&#xff0c;需要先排序两个长度为n/2的子数组&#xff0c;然后合并这两个排序的子数组&#xff0c;于是整个数组也就排序完毕。 分析 归并排序可以用迭代代码实现。例如&#xff0c;输入一个长度为8的数组…

《深入理解JAVA虚拟机笔记》垃圾回收器

JVM 判定 Java 对象是否为垃圾的方法 引用计数算法 很多教科书判断对象是否存活的算法是这样的: 在对象中添加一个引用计数器&#xff0c;每当有一个地方引用它时&#xff0c;计数器值就加一&#xff1b;当引用失效时&#xff0c;计数器值就减一&#xff1b;任何时刻计数器为…