前端性能优化的利器 ——— 浅谈JavaScript中的防抖和节流

防抖和节流函数是工作中两种常用的前端性能优化函数,今天我就来总结一下什么是防抖和节流,并详细说明一下如何在工作中应用防抖和节流函数

什么是防抖和节流?

在 JavaScript 中,防抖(debounce)和节流(throttle)是用来限制函数执行频率的两种常见技术。

防抖(debounce) 是指在某个时间段内,只执行最后一次触发的函数调用。如果在这个时间段内再次触发该函数,会重新计时,直到等待时间结束才会执行函数。
这个技术通常用于处理频繁触发的事件,比如窗口大小调整、搜索框输入等。防抖可以避免函数执行过多次,以减少网络开销和性能负担。

节流(throttle) 是指在一段时间内限制函数的执行频率,保证一定时间内只执行一次函数调用。无论触发频率多高,都会在指定时间间隔内执行一次函数。
这个技术通常用于处理连续触发的事件,比如滚动事件、鼠标移动事件等。节流可以控制函数的执行频率,以减少资源消耗和提高性能。

手写一个防抖的工具函数

function debounce(func, delay) {let timeoutId;return function() {const context = this;const args = arguments;clearTimeout(timeoutId);timeoutId = setTimeout(function() {func.apply(context, args);}, delay);};
}

函数说明

  1. 这个防抖函数接受两个参数:func表示需要进行防抖的函数,delay表示延迟的时间间隔(以毫秒为单位)
  2. 函数内部使用了一个timeoutId变量来保存定时器的标识。当调用防抖函数返回的新函数时,会清除之前的定时器,并设置一个新的定时器。只有在延迟时间内没有再次调用该新函数时,才会触发最终的函数执行

使用示例

该示例表示在全局滚动事件中使用防抖函数,每200毫秒内如果触发滚动事件,那么不会执行handleScroll()函数。
然后重新计时200毫秒,再次判断,直到最后一个200毫秒内没有触发滚动事件,才会执行handleScroll()函数

function handleScroll() {console.log('Scrolled');
}
const debouncedScroll = debounce(handleScroll, 200);
window.addEventListener('scroll', debouncedScroll);

手写一个节流的工具函数

function throttle(func, delay) {let timeoutId;let lastExecTime = 0;return function(...args) {const currentTime = Date.now();const remainingTime = delay - (currentTime - lastExecTime);clearTimeout(timeoutId);if (remainingTime <= 0) {func.apply(this, args);lastExecTime = currentTime;} else {timeoutId = setTimeout(() => {func.apply(this, args);lastExecTime = Date.now();}, remainingTime);}};
}

函数说明

  1. 这个节流函数接受两个参数:func是要执行的函数,delay是延迟时间(以毫秒为单位)
  2. 它返回一个新的函数,该函数在调用时会根据指定的延迟时间来限制原始函数的执行频率

使用示例

在全局滚动事件中使用节流函数,无论在滚动事件的监听过程中,触发了几次handleScroll()函数,都只会在每200毫秒内执行一次handleScroll()函数。

function handleScroll() {console.log('Scrolled');
}
const throttledScroll = throttle(handleScroll, 200);
window.addEventListener('scroll', throttledScroll);

如何在工作中应用防抖和节流

防抖和节流主要应用于:搜索框输入事件监听、窗口大小调整事件监听、按钮点击事件监听、滚动事件监听、鼠标移动事件监听等等场景。

工作中哪些场景可以使用防抖函数?

  1. 用户输入: 当用户在表单输入框中频繁输入时,可以使用防抖函数来延迟处理用户输入,避免频繁的请求或操作,提高性能和用户体验。
  2. 搜索框: 在搜索框中,当用户连续输入关键字时,可以使用防抖函数来延迟发送搜索请求,以避免请求过多。
  3. 窗口调整: 当窗口大小调整时,会触发resize事件,可以使用防抖函数来限制resize事件的触发次数,避免频繁执行调整相关的代码。
  4. 按钮频繁点击: 当按钮被频繁点击时,可以使用防抖函数来限制按钮点击的触发次数。

工作中哪些场景可以使用节流函数?

  1. 用户输入: 当用户在文本框中输入时,触发搜索功能。使用节流函数可以限制搜索请求的频率,以避免频繁的网络请求。例如,可以设置一个定时器,在用户输入后的一小段时间内不触发搜索请求,只在定时器结束后才进行搜索。
  2. 无限加载: 当用户滚动页面时,触发加载更多数据的操作。使用节流函数可以限制加载操作的频率,以提高页面的响应性能。例如,可以设置一个定时器,在用户滚动过程中只触发加载操作的最后一次滚动事件。
  3. 按钮频繁点击: 当用户频繁点击某个按钮时,触发某个操作。使用节流函数可以限制点击操作的频率,以避免重复操作或者混乱的界面状态。例如,可以设置一个定时器,在用户点击后的一小段时间内不触发重复操作。

如何使用loadsh.js工具库中的防抖和节流函数

实际开发过程中,我们的项目中可能会直接使用loadsh.js工具库,来避免重复造轮子,所以这里也特地说明一下如何使用loadsh.js工具库中的防抖和节流函数

  1. 安装loadsh.js工具库
npm install lodash  
  1. 在项目中引入loadsh.js工具库,不同前端项目引入方式不同,请自行鉴别
import { debounce, throttle } from 'loadsh';
  1. 使用防抖函数,该示例中,submitData()函数被限制为每1秒只会执行最后一次,如果在等待时间内多次调用该函数,则会重置1秒的等待时间
// 定义要延迟执行的函数
function submitData(data) {console.log('保存数据:', data);
}// 使用debounce函数创建一个延迟执行的函数
const debouncedFn = _.debounce(submitData, 1000);// 模拟连续触发保存数据的操作
// 等待1秒后,只会执行最后一次保存数据的操作
debouncedFn('数据1'); // 不会输出
debouncedFn('数据2'); // 不会输出
debouncedFn('数据3'); //  输出 —— 保存数据:数据3
  1. 使用节流函数,该示例中,throttledFn()函数被限制为每秒只能执行一次,如果在等待时间内多次调用该函数,则不会执行
// 定义要减少调用次数的函数
function fetchData(data) {console.log('拉取数据:', data);
}// 使用throttle函数创建一个定时执行的函数
const throttledFn = _.throttle(fetchData, 2000);// 调用throttledFn函数
throttledFn('数据1'); // 输出 —— 拉取数据: 数据1// 在1秒内多次调用throttledFn函数
throttledFn('数据2'); // 不会输出// 2秒后再次调用throttledFn函数
setTimeout(() => {throttledFn('数据3'); // 输出 —— 拉取数据: 数据3
}, 1000);

我是 fx67ll.com,如果您发现本文有什么错误,欢迎在评论区讨论指正,感谢您的阅读!
如果您喜欢这篇文章,欢迎访问我的 本文github仓库地址,为我点一颗Star,Thanks~ 😃
转发请注明参考文章地址,非常感谢!!!

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

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

相关文章

RTT(RT-Thread)线程管理(1.2W字详细讲解)

目录 RTT线程管理 线程管理特点 线程工作机制 线程控制块 线程属性 线程状态之间切换 线程相关操作 创建和删除线程 创建线程 删除线程 动态创建线程实例 启动线程 初始化和脱离线程 初始化线程 脱离线程 静态创建线程实例 线程辅助函数 获得当前线程 让出处…

数组中的第K个最大元 O(N)

给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1: 输入: [3,2,1,5,6,4], k 2…

[腾讯云Cloud Studio实战训练营]无门槛使用GPT+Cloud Studio辅助编程完成Excel自动工资结算

目录 前言一、Cloud Studio产品介绍1.1 注册Cloud Studio 二、项目实验2.1 选择合适的开发环境2.2 实验项目介绍2.3 实验步骤三、总结 前言 chatgpt简单介绍: ChatGPT是一种基于GPT的自然语言处理模型&#xff0c;专门用于生成对话式文本。它是OpenAI于2021年发布的&#xff0…

突破传统监测模式:业务状态监控HM的新思路 | 京东云技术团队

一、传统监控系统的盲区&#xff0c;如何打造业务状态监控。 在系统架构设计中非常重要的一环是要做数据监控和数据最终一致性&#xff0c;关于一致性的补偿&#xff0c;已经由算法部的大佬总结过就不再赘述。这里主要讲如何去补偿&#xff1f;补偿的方案哪些&#xff1f;这就…

TCP/IP协议

TCP/IP 是一类协议系统&#xff0c;它是用于网络通信的一套协议集合 物理层 所谓的物理层&#xff0c;是指光纤、电缆或者电磁波等真实存在的物理媒介。这些媒介可以传送物理信号&#xff0c;比如亮度、电压或者振幅。对于数字应用来说&#xff0c;我们只需要两种物理信号来分别…

加强 Kubernetes 能力:利用 CRD 定义多版本资源的实现方式

姚灿武&#xff0c;Rancher 中国研发工程师&#xff0c;拥有 7 年云计算领域经验&#xff0c;热衷开源技术&#xff0c;在云原生相关技术领域拥有丰富的开发和实践经验。 CRD&#xff0c;即自定义资源定义&#xff08;Custom Resource Definition&#xff09;&#xff0c;是 Ku…

leetcode 435. 无重叠区间

2023.8.3 本题和引爆气球 这题非常类似&#xff0c;利用同样的思路可以解决&#xff0c;代码如下&#xff1a; class Solution { public:static bool cmp(vector<int>& a , vector<int>& b){if(a[0] b[0]) return a[1] < b[1];return a[0] < b[0];…

SpringBoot复习:(16)TomcatStarter

直接在idea里运行SpringBoot程序时&#xff0c;内嵌的tomcat容器会调用TomcatStarter这个类的onStartup方法。TomcatStarter继承自ServletContainerInitializer 其onStartup方法会调用ServletContextInitializer&#xff08;不是ServletContainerInitializer)的onStartup方法.…

Unity 引擎做残影效果——3、顶点偏移方式

Unity实现残影效果 大家好&#xff0c;我是阿赵。 继续讲Unity引擎的残影做法。这次的残影效果和之前两种不太一样&#xff0c;是通过顶点偏移来实现的。 具体的效果是这样&#xff1a; 与其说是残影&#xff0c;这种效果更像是移动速度很快时造成的速度线&#xff0c;所以在移…

C# 开发规范

控件命名规则 控件名简写 控件名简写LabellblTextBoxtxtButtonbtnLinkButtonlnkbtnImageButtonimgbtnDropDownListddlListBoxlstDataGriddgDataListdlCheckBoxchkCheckBoxListchklsRadioButtonrdoRadioButtonListrdoltImageimgPanelpnlCalendecldAdRotatorarTabletblRequiredF…

Flink On Yarn模式部署与验证

session运行模式 该模式下分为2步&#xff0c;即使用yarn-session.sh申请资源&#xff0c;然后 flink run提交任务。 1、申请资源yarn-session.sh #在server1执行命令 /usr/local/flink-1.13.5/bin/yarn-session.sh -tm 1024 -n 2 -s 1 -d #申请2个CPU、2g内存 # -tm 表示每个…

关于前后端分离

关于前后端分离 接下来&#xff0c;你将进入 前后端分离项目开发 模块。 这也是企业中比较常见的开发模式。 疑问&#xff1a; 什么是前后端分离&#xff1f;与之前的开发模式有什么区别&#xff1f;企业为什么要用前后端分离&#xff1f; 1. 什么是前后端分离&#xff1f;…

LeetCode|DP|70. 118. 119.

70. Climbing Stairs memorization。 118. Pascals Triangle 2d array的熟练程度。 ​​​​​​119. Pascals Triangle II 节省空间版的118.只需要两个vec&#xff0c;一个是老的&#xff0c;把老的后面push一个1&#xff0c;然后用新的算。然后老新就行。

基于人工智能的状态监测帮助结束冷却塔的维护“噩梦”

冷却塔是将水蒸气冷却成较低温的水、将系统的废热排到大气层的排热装置&#xff0c;在工业生产中扮演着不可或缺的关键角色。大型工业冷却塔的主要用途是用来冷却在水冷系统中的循环水。这些水冷系统广泛应用于发电厂、炼油厂、石化厂、天然气制造厂、食品加工厂、半导体厂等工…

2308C++基本宏

学习宏编程 这里细节 #define 宏删括(T) 宏删括_ T //如果T有括号,自动就删除了. #define 宏删括_(...) __VA_ARGS__延时拼接: #define 宏连(A,B) 宏连_(A,B) //先展开 #define 宏连_(A,B) A##B //再拼接.这样: #define FOO(N) 宏连(foo_, N) FOO(bar) // -> foo_bar …

ARP断网攻击及防御

ARP断网攻击及防御 攻击防御 攻击 PC1的IP地址 10.9.136.222 PC2的IP地址 10.9.136.55在局域网里通信 需要有IP地址和MAC地址 两台电脑PC1和PC2要想相互通信&#xff0c;PC1在连接PC2的时候&#xff0c;PC1会先查看自己的ARP缓存表&#xff08;命令&#xff1a;arp -a &#xf…

校园跑腿小程序运营攻略

作为一名校园跑腿小程序的运营者&#xff0c;你可能会面临诸如用户获取、平台推广、服务质量保证等挑战。在本篇推文中&#xff0c;我将为你提供一些关键的运营策略&#xff0c;帮助你成功运营校园跑腿小程序。 1. 用户获取和留存 用户是校园跑腿小程序成功的关键。以下是一些…

C++如何用OpenCV中实现图像的边缘检测和轮廓提取?

最近有个项目需要做细孔定位和孔距测量&#xff0c;需要做边缘检测和轮廓提取&#xff0c;先看初步效果图&#xff1a; 主要实现代码&#xff1a; int MainWindow::Test() {// 2.9 单个像素长度um 5倍double dbUnit 2.9/(1000*5);// 定义显示窗口namedWindow("src"…

VR实景导航——开启3D可视化实景导航新体验

数字化时代&#xff0c;我们大家出门在外都是离不开各种导航软件&#xff0c;人们对导航的需求也越来越高&#xff0c;而传统的导航软件由于精度不够&#xff0c;无法满足人们对真实场景的需求&#xff0c;这个时候就需要VR实景导航为我们实景指引目的地的所在。 VR实景导航以其…

Bookshelf B(c++题解)

题目描述 Farmer John最近为奶牛们的图书馆添置了一个巨大的书架&#xff0c;尽管它是如此的大&#xff0c;但它还是几乎瞬间就被各种各样的书塞满了。现在&#xff0c;只有书架的顶上还留有一点空间。 所有N(1≤N≤20,000) 头奶牛都有一个确定的身高 Hi​(1≤Hi​≤10,000)。…