提升前端效率:掌握防抖与节流

目录

概念

代码实现

区别

应用场景


概念

当涉及到处理高频事件时,防抖(Debounce)和节流(Throttle)成为关键的工具。它们的作用是优化函数的执行频率,特别是在处理浏览器事件(如resize、scroll、keypress、mousemove等)时,有助于减少不必要的函数执行,提高前端性能和用户体验

节流(Throttle) 像是给事件加上了时间间隔。就像大厦底下的电梯,定时运行以确保在每个时间段内只执行一次。比如,在规定的时间间隔内(比如15秒),无论有多少人进入电梯,都只会在规定时间到达时运行一次。

防抖(Debounce) 则更像是“重置”计时器。当第一个人进入电梯后,等待一段时间(比如15秒),如果这段时间内有人再次进入,计时器会重新开始,直到等待时间耗尽后才会执行一次。

这两种策略都有助于控制函数的执行次数,优化性能,并可根据场景特性选择合适的策略。节流适用于需要在一段时间内定期执行的场景,而防抖则更适用于等待最后一个事件后再执行的场景。正确使用它们能有效减少资源消耗,改善用户体验,特别是在大规模的前端应用中。

代码实现

以下是节流的具体代码实现:

function throttled(fn, delay) {let timer = nulllet starttime = Date.now()return function () {let curTime = Date.now() // 当前时间let remaining = delay - (curTime - starttime)  // 从上一次到现在,还剩下多少多余时间let context = thislet args = argumentsclearTimeout(timer)if (remaining <= 0) {fn.apply(context, args)starttime = Date.now()} else {timer = setTimeout(fn, remaining);}}
}

这段代码是一个简单的基于时间戳的节流函数实现。它的目的是确保一个特定函数在设定的时间间隔内只执行一次。

首先,它接受一个需要执行的函数和一个时间间隔作为参数。在每次函数被调用时,它会记录当前时间戳并计算自上次执行以来的时间差。这段时间与设定的时间间隔进行比较:

如果时间间隔已经超过了设定的延迟,那么立即执行传入的函数,并更新上次执行的时间戳。如果时间间隔尚未达到设定的延迟,它会设置一个新的定时器,在剩余的时间后再次尝试执行函数。

以下是防抖的具体代码实现:

function debounce(func, wait) {let timeout;return function () {let context = this; // 保存this指向let args = arguments; // 拿到event对象clearTimeout(timeout)timeout = setTimeout(function(){func.apply(context, args)}, wait);}
}

这个函数接收一个需要执行的函数和一个等待时间作为参数。每当这个函数被调用时,它会清除之前设定的定时器,并设置一个新的定时器,在等待一段时间后执行传入的函数。

每次调用函数时,它会获取当前的 this 上下文和传入的参数。然后清除之前设置的定时器。接着,设置一个新的定时器,在指定的等待时间后执行传入的函数,并将之前获取的上下文和参数传递给这个函数。

防抖如果需要立即执行,可加入第三个参数用于判断,实现如下:

function debounce(func, wait, immediate) {let timeout;return function () {let context = this;let args = arguments;if (timeout) clearTimeout(timeout); // timeout 不为nullif (immediate) {let callNow = !timeout; // 第一次会立即执行,以后只有事件执行后才会再次触发timeout = setTimeout(function () {timeout = null;}, wait)if (callNow) {func.apply(context, args)}}else {timeout = setTimeout(function () {func.apply(context, args)}, wait);}}
}

这个函数和之前的防抖函数类似,接收一个需要执行的函数、等待时间和一个布尔值 immediate 作为参数。但是它做了一些额外的处理以满足不同的需求。

首先,它仍然会获取当前的 this 上下文和传入的参数。然后,根据 immediate 参数的不同情况进行不同的处理:如果 immediatetrue,则在第一次调用时会立即执行函数,并且只有在等待时间后再次触发时才会重新计时延迟执行。如果 immediatefalse 或未提供,默认行为是等待一定时间后执行函数。

在代码中,它根据 immediate 参数的值设定一个 callNow 变量,用于控制第一次是否立即执行函数。如果是立即执行,并且是第一次调用,则会立即执行函数;否则,在等待时间后执行函数。

这种实现方式适用于需要在首次触发时立即执行一次函数的情况,之后再根据设定的间隔进行延迟执行。这样能够更加灵活地满足不同场景下的需求,比如处理搜索建议时立即展示结果,然后在用户停止输入后再次触发。

区别

防抖和节流都是用于控制函数执行频率的技术,但它们的核心思想和实现方式有所不同。

防抖的核心思想是确保在连续触发事件后,只有在最后一次触发后的一段时间内没有再次触发时才执行函数。换句话说,当函数被触发后,如果在指定的时间内再次触发,就会重新计时延迟执行。这可以避免在短时间内多次触发时导致函数过早执行。

节流的核心思想是确保函数在一定时间间隔内最多执行一次。它会稀释函数的执行频率,无论触发频率多高,函数都会按照规定的时间间隔执行一次。这可以有效减少函数的执行次数。

区别在于:

触发时刻不同: 防抖在最后一次触发后的一段时间内不再触发才执行函数,而节流则是按照一定的时间间隔执行函数。

执行次数不同: 防抖确保在延迟后执行一次,而节流在规定的时间间隔内执行一次。

举例来说,如果是处理输入框搜索建议,防抖会在用户输入停止后延迟一段时间再触发搜索;而节流则会每隔一定时间执行一次搜索,无论用户输入频率如何。

应用场景

防抖的应用场景:

1️⃣ 输入框搜索建议: 在用户输入时,防抖可以延迟执行搜索操作,只有在用户停止输入一段时间后才触发实际的搜索请求,减少无效请求,提高搜索体验。

2️⃣ 窗口大小调整: 当用户调整浏览器窗口大小时,防抖可用于延迟调整页面布局或重新计算元素大小,确保在用户停止调整窗口大小后才执行这些操作,避免频繁执行布局或计算操作。

3️⃣  按钮点击事件: 在按钮点击时,使用防抖可以避免用户多次点击造成的多次触发,确保只有在最后一次点击后的一段时间内没有再次点击时才执行操作,比如提交表单或打开新页面。

节流的应用场景:

1️⃣ 页面滚动: 当用户滚动页面时,节流可以控制滚动事件的触发频率,以降低滚动事件的处理次数,提高页面性能。

2️⃣ 鼠标移动事件: 在处理鼠标移动时,节流能够稀释函数的执行,保证在一定时间内只执行一次,避免过多的鼠标移动事件触发函数执行。

3️⃣ 限制接口请求: 在某些场景下,例如用户频繁操作触发接口请求,节流可用于限制请求的频率,确保在一定时间间隔内只发送一次请求,避免服务器压力过大或节省用户的流量消耗。

好啦,本文就到这里啦!

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

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

相关文章

UDP网络编程其他相关事项

netstat指令 netstat -an 可以查看当前主机网络情况&#xff0c;包括端口监听情况和网络连接情况。 netstat -an | more 可以分页显示。 要求在dos控制台下执行。 说明&#xff1a;&#xff08;1&#xff09;Listening表示某个端口在监听&#xff1b;&#xff08;2&#xf…

binkw32.dll丢失怎么办?这5个方法都可以解决binkw32.dll丢失问题

binkw32.dll文件是什么&#xff1f; binkw32.dll是一个动态链接库文件&#xff0c;它是Windows操作系统中的一个重要组件。它包含了许多用于处理多媒体文件的函数和资源&#xff0c;如视频、音频等。当我们在电脑上打开或播放某些多媒体文件时&#xff0c;系统会调用binkw32.d…

显示器件是什么

显示器件 电子元器件百科 文章目录 显示器件前言一、显示器件是什么二、显示器件的类别三、显示器件的应用实例四、显示器件的作用原理总结前言 显示器件根据不同的技术原理和应用领域,具有不同的特点和优势,可适用于电子产品、电视、计算机显示器、手持设备、汽车仪表盘等…

绿盟 SAS堡垒机 local_user.php 权限绕过漏洞复现

绿盟 SAS堡垒机 local_user.php 权限绕过漏洞复现 一、 产品简介二、漏洞概述三、 复现环境四、漏洞复现五、小龙检测 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&…

Codeforces Round 774 (Div. 2) (D树形dp上司的舞会 C二进制枚举+快速幂? E打表求每个底数不同贡献)

A - Square Counting 直接能填就填n*n就填&#xff0c;不然全0啥的即可 #include<bits/stdc.h> using namespace std; const int N 3e510,mod998244353; #define int long long typedef long long LL; typedef pair<int, int> PII; typedef unsigned long long …

全维度构建核心竞争优势,极智嘉(Geek+)连获六项大奖

近日&#xff0c;全球仓储机器人引领者极智嘉(Geek)一举斩获国内外六大重磅奖项&#xff0c;在技术实力、出海成绩到人才战略等多个维度&#xff0c;再度向大众展示了行业标杆的强劲实力。 首先在技术实力上&#xff0c;此前极智嘉与罗马尼亚医药电商Dr.MAX达成合作&#xff0…

测试用例设计方法六脉神剑——第四剑:石破天惊,功能图法攻阵

1 引言 前面几篇文章为我们讲述了因果图、判定表、正交试验等几种方法&#xff0c;主要是针对于不同条件输入输出的组合进行测试&#xff0c;但在实际需求中&#xff0c;我们也常会遇到需要对被测对象的状态流转进行验证的情况&#xff0c;此时前面几种方法将不再适用&#xf…

美国访问学者陪读签证怎么申请?

美国访问学者陪读签证是许多前往美国深造的学者及其家属关注的重要问题。如何申请这一签证&#xff0c;一直以来都是备受关注的话题。下面知识人网小编将为您介绍一下美国访问学者陪读签证的申请流程。 首先&#xff0c;申请人需要了解访问学者陪读签证的基本要求。通常情况下&…

马尔科夫预测模型(超详细,案例代码)

概述 马尔科夫预测模型是一种基于马尔科夫过程的预测方法。马尔科夫过程是一类具有马尔科夫性质的随机过程&#xff0c;即未来的状态只依赖于当前状态&#xff0c;而与过去状态无关。这种过程通常用状态空间和状态转移概率矩阵来描述。 在马尔科夫预测模型中&#xff0c;系统被…

Java打印堆栈信息

1、简要介绍 jmap&#xff1a;可以输出所有内存中对象的工具&#xff0c;甚至可以将VM 中的heap&#xff0c;以二进制输出成文本。 2、命令格式 jmap [ option ] pidjmap [ option ] executable corejmap [ option ] [server-id]remote-hostname-or-IP3、参数说明 1)、optio…

Windows句柄与内核对象

内核对象 基本概念 例如&#xff0c;访问令牌&#xff0c;事件对象&#xff0c;文件对象&#xff0c;文件映射对象&#xff0c;I/O完成端口对象&#xff0c;作业对象&#xff0c;邮件槽对象&#xff0c;互斥量对象&#xff0c;管道&#xff0c;进程对象&#xff0c;信号量对象…

Disruptor详解,Java高性能内存队列最优解

文章目录 一、Disruptor介绍1、为什么要有Disruptor2、Disruptor介绍3、Disruptor的高性能设计4、RingBuffer数据结构5、等待策略6、Disruptor在日志框架中的应用7、术语 二、Disruptor实战1、引入依赖2、Disruptor构造器3、入门实例&#xff08;1&#xff09;Hello World&…

浮动的魅力与挑战:如何在前端设计中巧妙运用浮动(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

SpringBoot的Starter自动化配置,自己编写配置maven依赖且使用及短信发送案例

目录 一、Starter机制 1. 是什么 2. 有什么用 3. 应用场景 二、短信发送案例 1. 创建 2. 配置 3. 编写 4. 形成依赖 6. 其他项目的使用 每篇一获 一、Starter机制 1. 是什么 SpringBoot中的starter是一种非常重要的机制(自动化配置)&#xff0c;能够抛弃以前繁杂…

SD-WAN解决外贸企业网络问题

为了获取全球客户&#xff0c;占领更多的市场&#xff0c;越来越多的外贸企业出现。外贸企业在发展业务的过程中会遇到很多困难&#xff0c;海外网络访问问题就是其中之一。目前该问题主要有三种解决方案&#xff1a;VPN、MPLS专线以及SD-WAN专线。 VPN通过在公网上面建立专用网…

什么是LAMP和LNMP?它们有何区别?

LAMP 和 LNMP 是两种常见的 Web 服务器架构&#xff0c;它们分别代表了 Linux、Apache/Nginx、MySQL、PHP/Python/Perl 或类似技术的首字母。它们是构建 Web 应用程序和托管动态网站的标准架构。以下是它们的定义和主要区别&#xff1a; LAMP 架构&#xff1a; Linux&#xff…

WPF-UI HandyControl 简单介绍

文章目录 前言我的网易云专栏和Gitee仓库HandyControlHandyControl示例相关资源地址 我的运行环境快速开始和Material Design功能对比手风琴右键菜单自动补充滚动条轮播图消息通知步骤条托盘按钮 结尾 前言 最近我在研究如何使用WPF做一个比较完整的项目&#xff0c;然后我就先…

python的time模块中几个关于时间的方法

1、time.time():time.time()的返回值是一个跨平台的、标准化的时间格式&#xff0c;可以直接用于时间戳的计算和比较。返回值是一个带有小数的浮点数&#xff0c;表示1970年1月1日以来的秒数。 import timeprint(time.time()) time.sleep(1) print(time.time())# 1702557555.…

javaweb搭配ajax和json

ajax一般用来前端界面与后端界面交互使用。数据格式一般使用json&#xff0c;优点是便于对象与字符串的转化。 1.不适用json对象封装。 jsp: <script>$.ajax({url: "/LoginServlet",data: {"name":name, "pwd":password},dataType: &qu…

SLAM学习——相机模型(针孔+鱼眼)

针孔相机模型 针孔相机模型是很常用&#xff0c;而且有效的模型&#xff0c;它描述了一束光线通过针孔之后&#xff0c;在针孔背面投影成像的关系&#xff0c;基于针孔的投影过程可以通过针孔和畸变两个模型来描述。 模型中有四个坐标系&#xff0c;分别为world&#xff0c;c…