JavaScript:节流防抖

JavaScript:节流&防抖

    • 节流
      • 什么是节流
      • 节流的实现
    • 防抖
      • 什么是防抖
      • 防抖的实现


节流

什么是节流

在JavaScript中,节流throttle是一种限制函数执行频率的技术。
当一个函数被频繁调用时,节流能够控制函数执行的次数,以避免过多的计算和资源的浪费。

比如说在游戏中,一个技能的释放是有间隔的。当我们释放了一次技能后,只有过一段时间才能再次释放这个技能。这就是一种节流。

节流的实现

接下来我们就写个函数,来实现节流。我会先为大家展示代码,然后进行解析。

实现节流的一种常见方法是使用定时器。基本的节流函数如下所示:

function throttle(func, wait) {let timer;return function() {if (!timer) {timer = setTimeout(function() {func.apply(this, arguments);timer = null;}, wait);}};
}

该函数接受两个参数:待执行的函数func和等待时间wait

待执行的函数就是我们每隔一段时间需要调用的函数,wait则是在触发一次后,在wait时间内无法再次触发这个函数。

我们首先拆解一下这个函数的大题结构:

function throttle(func, wait) {let timer;return function() {if (!timer) {...}};
}

其基本结构为:在外层函数throttle设置一个timer变量,然后在内层函数使用了timer变量,并把内层函数作为外层函数的返回值。
这个结构,就是一个标准的闭包结构!(不知道闭包的可以看这篇文章[JavaScript:作用域&变量回收])
那么这个闭包结构有什么用呢?

其保证了 timer这个变量永远不会被销毁,我们在下一次访问这个函数的时候依然可以用上一次留下来的timer,以确定距离上一次的事件也没有到达指定时间。

再看到内层函数:

function() {if (!timer) {timer = setTimeout(function() {func.apply(this, arguments);timer = null;}, wait);}};

timersetTimeout的返回值,当timer为空时,就会执行if语句内部的代码:timer = setTimeout(),此时timer就立刻得到了setTimeout的返回值。
然后setTimeout内部的代码要等待 wait时间后才执行。等到 wait时间后,调用函数func,即我们想要节流的函数。随后将 timer = null;保证下一次使用这个函数可以被执行。
在这个过程中,在setTimeout被调用的瞬间,timer就立刻得到了setTimeout的返回值而不为空。这个时间内, if (!timer)就会判断为false,从而不执行内部代码。当 wait时间后,执行 timer = null;,此时if (!timer)就会判断为true,从而进入下一次节流。


另一种常见的实现节流的方式是使用时间戳。基本的节流函数如下所示:

function throttle(func, wait) {let previous = 0;return function() {let now = Date.now();if (now - previous > wait) {func.apply(this, arguments);previous = now;}};
}

该函数使用一个变量previous来记录上一次函数执行的时间戳。当函数被调用时,首先获取当前的时间戳,然后与上一次执行的时间戳进行比较。如果两个时间戳之间的间隔大于等待时间,则执行函数,并更新上一次执行的时间戳。否则,不执行函数。

此处也是使用了和刚才一样的闭包结构,唯一的区别就是前面使用setTimeout来控制时间,而此处利用时间戳的减法控制时间。

这两种实现节流的方式都可以达到限制函数执行频率的效果,具体选择哪种方式取决于具体的使用场景和需求。但是两者利用的重要思想都是闭包结构保留变量


防抖

什么是防抖

防抖事件指的是在连续触发某个事件时,只有等到一定的时间间隔内没有再次触发,才会执行该事件。其主要目的是防止事件的频繁触发,从而减少不必要的资源消耗和提升性能。

就好比如moba游戏中的回城效果。如果你点击回城后,再次点击回城,那么先前的回城就会被阻断,重新计时。这就是节流的思想。


防抖的实现

防抖的实现通常是通过定时器实现的。当事件触发时,先清除之前的定时器,再重新设置一个新的定时器,在指定的时间间隔内如果没有再次触发事件,则执行该事件。如果在时间间隔内再次触发了事件,则重新设置定时器,并重置计时。

下面是一个示例,使用JavaScript实现一个简单的防抖事件:

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

上述示例中,使用了debounce函数来实现防抖功能。debounce函数接受一个需要执行的事件处理函数和延迟时间作为参数,返回一个新的函数。当事件触发时,该新函数会清除之前的定时器clearTimeout(timer);,并重新设置一个新的定时器 timer = setTimeout。如果在延迟时间内再次触发了事件,会重置定时器。直到延迟时间内没有再次触发事件时,才会执行事件处理函数。

具体使用:

function handleScroll() {console.log('Scroll被触发了');
}window.addEventListener('scroll', debounce(handleScroll, 200));

在上述示例中,我们在window对象上监听了scroll事件,并使用防抖函数将事件处理函数包裹起来。延迟时间设置为200毫秒,意味着只有在200毫秒内没有再次触发scroll事件时,才会执行handleScroll函数。

同样的,防抖也利用了闭包思想

通过使用防抖事件,可以有效地减少事件的触发次数,提升性能和用户体验。


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

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

相关文章

红帽Redhat安装教程及安装出错(Liunx)

一、红帽5安装 1.打开vmware,新建虚拟机。或者文件→新建虚拟机 2.自定义,下一步 3.下一步 4.稍后安装操作系统,下一步 5.linux 红帽5 64位,下一步 6.给虚拟机取名字,选择安装路径。下一步 7.下一步(可以根据自己的电脑配置稍微增加数量) 8.4GB 下一步 9.仅主机(根据需…

【JavaEE】Java多线程状态-- 多线程篇(10)

Java 多线程状态 1. 线程一共有几个状态?2. 每种状态表示的含义 & 状态之间的切换条件 1. 线程一共有几个状态? 在 Java 中, 线程的状态主要有新建, 就绪, 运行, 阻塞, 等待和超时等待; 2. 每种状态表示的含义 & 状态之间的切换条件 首先处于新建状态, 当线程调用…

flutter实践:慎用Expanded(二)

问题:又一次遇到使用Expanded引起的问题,debug模式调试正常,release版本导致页面卡死。 问题代码: return SizedBox(height: uiCommonConfig.heightXxl,child: Expanded(child: SingleChildScrollView(scrollDirection: Axis.ho…

五步解决Ubuntu界面太小的问题

名人说:莫听穿林打叶声,何妨吟啸且徐行。—— 苏轼《定风波莫听穿林打叶声》 Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder) 对于20版本及以上的unbuntu我们可以通过安装open-vm-tools来解决界面大小的问题,具体步骤如…

QT动态属性Q_PROPERTY

This macro is used for declaring properties in classes that inherit QObject. Properties behave like class data members, but they have additional features accessible through the Meta-Object System. 这个宏用于在继承自 QObject的类中声明属性。属性就像类的数据成…

边缘计算设备是什么意思。

问题描述:边缘计算设备是什么意思。 问题解答: 边缘计算(Edge Computing)是一种计算模型,其主要思想是在距离数据产生源头更近的地方进行数据处理和计算,而不是将所有数据传输到远程云服务器进行处理。边…

内存 vs 硬盘:固态硬盘代替内存可以工作吗?

使用固态硬盘代替内存可以吗? 答案是​:不可以​。 ​这个问题看似复杂,其实包含很多方面的原因。 一、存储结构方面 固态硬盘和内存在存储结构上就完全不同。 1.1 固态硬盘采用的是3D闪存单元阵列来存储数据 这些存储单元被一层层地堆…

vuetify 回到顶部

参考链接 // 回到id#app-content-container 的dom节点顶部 onScroll() {const ele document.querySelector(#app-content-container)// this.$vuetify.goTo(0, duration)this.$vuetify.goTo(#app-content-container, { container: ele })},

【ONE·MySQL || 数据类型 表的约束】

总言 主要内容:介绍MySQL中的常见数据类型(数值类型、文本二进制类型、时间日期、字符串类型),以及对表的约束(非空约束、默认约束、列描述、零填充约束、自增长约束、主键约束、唯一键约束、外键约束)。  …

Linux内核--进程管理(十二)LinuxIO基础知识与概念

目录 一、引言 二、IO基本概念 ------>2.1、内存空间划分 ------>2.2、读写操作 ------>2.3、用户态切换到内核态的3种方式 三、PIO&DMA ------>3.1、PIO 工作原理 ------>3.2、DMA 工作原理 四、缓冲IO和直接IO ------>4.1、缓冲 IO ------&…

es集群安装及优化

es主节点 192.168.23.100 es节点 192.168.23.101 192.168.23.102 1.安装主节点 1.去官网下载es的yum包 官网下载地址 https://www.elastic.co/cn/downloads/elasticsearch 根据自己的需要下载对应的包 2.下载好之后把所有的包都传到从节点上,安装 [rootlocalho…

C++中的new和delete

相关文章 C智能指针 文章目录 相关文章前言一、new 运算符1. operator new 函数的范围2. 在类中重载new运算符3. 分配失败 二、delete 运算符1. 内存泄露统计示例2. 在类中重载delete运算符 总结 前言 在C中,new和delete是用于动态内存管理的运算符,它们…

【多模态】ALBEF

ALBEF 论文信息 标题:Align before Fuse: Vision and Language Representation Learning with Momentum Distillation 作者:Junnan Li(Salesforce Research) 期刊:NeurIPS 2021 发布时间与更新时间:2021.07.16 2021.10.07 主题:多模态、预训练、图像、文本、对比学习、知…

3D人体姿态估计(教程+代码)

3D人体姿态估计是指通过计算机视觉和深度学习技术,从图像或视频中推断出人体的三维姿态信息。它是计算机视觉领域的一个重要研究方向,具有广泛的应用潜力,如人机交互、运动分析、虚拟现实、增强现实等。 传统的2D人体姿态估计方法主要关注通…

欧科云链研究院:奔赴2024,Web3与AI共振引爆数字时代潘多拉魔盒

出品|欧科云链研究院 2024年,Web3与AI两个数字科技的巅峰碰撞,欧科云链研究院探索AI与Web3的技术融合,与澎湃科技联合发布2024年展望,原标题为《2024年展望:Web3与AI共振引爆可信数字社会》,共…

小程序如何配置扫码点餐功能

在餐饮行业中,通过小程序扫码点餐是一种非常方便和高效的方式。下面具体介绍怎么给小程序设置扫码点餐功能。 一、给每个桌子设置单独的小程序码。管理员点击个人中心->我的管理->更多->门店码。 生成小程序码页面,各个字段解释如下。 会员卡…

【Golang】Json 无法表示 float64 类型的 NaN 以及 Inf 导致的 panic

【Golang】Json 无法表示 float64 类型的 NaN 以及 Inf 导致的 panic 原因 golang 服务出现了 panic,根据 panic 打印出的堆栈找到了问题代码,看上去原因是:json 序列化时,遇到了无法序列化的内容 [panic]: json: unsupported …

机器人控制箱内部包含什么零件,有什么作用。

问题描述:机器人控制箱内部包含什么零件,有什么作用。 问题解答: 机器人控制箱是机器人系统中的一个关键组件,负责控制和协调机器人各个部件的运动和功能。控制箱的内部通常包含以下主要零件和模块: 主控制器&#x…

跟着小德学C++之日志记录

嗨,大家好,我是出生在达纳苏斯的一名德鲁伊,我是要立志成为海贼王,啊不,是立志成为科学家的德鲁伊。最近,我发现我们所处的世界是一个虚拟的世界,并由此开始,我展开了对我们这个世界…

数学之美一两处

引言 吴军博士的《数学之美》科普性地介绍了自然语言处理、搜索引擎、语音识别、智能导航等人工智能应用,一些看似很智能、高大上的应用,其背后的数学原理往往却并不复杂,体现了数学之美! 如果数学能够这样教,可能很多…