JavaScript:简单理解防抖和节流,如何定义防抖和节流函数?
防抖
防抖函数,就是防止抖动,避免事件重复触发。比如监听输入框的输入,不应该在用户每输入一个字符就触发监听,而是在用户输入结束后再来监听。
流程为:
1、事件触发;
2、开启定时器;
3、当事件再次触发的时候,就会清除上个定时器,然后重新开启新的定时器;
4、时间到了以后,就开始处理事件操作。
现在有一个输入框,代码如下:
import React from "react";
const Child2 = () => {return <input onChange={({ target: { value } }) => {console.log(value)}} />
};
效果如下图:

每输入一个字符,就触发监听事件。如果是搜索查询的话,那就不合适了。
现在在监听事件上设置防抖:
import React from "react";
const Child2 = () => {const inputChange = debounce(({ target: { value } }) => {console.log(value)})return <input onChange={inputChange} />
};
function debounce(fn) {let timeout = null;return function () {clearTimeout(timeout);timeout = setTimeout(() => {fn.apply(this, arguments);}, 1000);};
}
如果在定时器时间内,事件再次触发,那么就清空之前的定时器,然后重新开启新的定时器。
效果图:

这就是防抖。
节流
节流就是控制事件触发的频率。比如按钮点击,在短时间内多次点击,那么只需要触发一次即可。
比如:
import React from "react";
const Child2 = () => {return <button onClick={() => {console.log("点击")}}>点击</button>
};
连续点击多次,效果如下图,如果是涉及到网络请求的话,那么得不偿失了。

现在定义一下节流函数:
// 节流
function throttle(fn) {let timeout = null;return function () {if (timeout) return;timeout = setTimeout(() => {fn.apply(this, arguments);timeout = null;}, 1000);}
}
完整代码:
import React from "react";
const Child2 = () => {const click = throttle(() => {console.log("点击")})return <button onClick={click}>点击</button>
};// 节流
function throttle(fn) {let timeout = null;return function () {if (timeout) return;timeout = setTimeout(() => {fn.apply(this, arguments);timeout = null;}, 1000);}
}
在一秒内连续点击多次,最后只有一次有效。

相关文章:
JavaScript:简单理解防抖和节流,如何定义防抖和节流函数?
防抖 防抖函数,就是防止抖动,避免事件重复触发。比如监听输入框的输入,不应该在用户每输入一个字符就触发监听,而是在用户输入结束后再来监听。 流程为: 1、事件触发; 2、开启定时器; 3、当事…...
【opencv 系列】第3章 图像的8种变换
文章目录前言上代码1.1 复习读取和显示1.2 图像放大、缩小 cv2.resize()1.3 图像平移1.4 图像旋转1.5 图像仿射变换1.6 图像的裁剪1.7 位运算(AND, OR, XOR)1.8 图像的分离和融合1.9 颜色空间 color space前言 坦白说,这一章我认为是整个opencv系列最难的一张&…...
【C语言刷题】倒置字符串
解题思路与过程📽️解题思路📽️解题过程🔧1.输入🔧2.设计逆序函数🔧3.逆序整个字符串🔧4.逆序每个单词📽️源码📷先来看题👇📽️解题思路 🔴 首先…...
用switch语句编程设计一个简单的计算器程序,要求根据用户从键盘输入的表达式:
用switch语句编程设计一个简单的计算器程序,要求根据用户从键盘输入的表达式:操作数1 运算符op 操作数2计算表达式的值,指定的算术运算符为加()、减(-)、乘(*)、除&#…...
uboot编译分析
uboot编译分析 V 1 –> Q ,在一行命令前面加上表示不会在终端输出命令 KCONFIG_CONFIG ? .config.config 默认是没有的,默认是需要使用命令“make xxx_defconofig”先对uboot进行配置,配置完成就会在uboot根目录下生成.config。如果后续自行调整…...
SpringCloud Alibaba集成Dubbo实现远程服务间调用
SpringCloud Alibaba集成Dubbo实现远程服务间调用 工程创建 一、创建springBoot分模块项目,父工程:springcloud-alibaba以及子模块product-dubbo-provider、order-dubbo-consumer等 项目基本结构图如下所示: 二、依赖引入 在以上两个子模块…...
网络编程(一)
网络编程 文章目录网络编程前置概念1- 字节序高低地址与高低字节高低地址:高低字节字节序大端小端例子代码判断当前机器是大端还是小端为何要有字节序字节序转换函数需要字节序转换的时机例子一例子二2- IP地址转换函数早期(不用管)举例现在与字节序转换函数相比:**…...
PVE硬件直通之强制IOMMU分组
文章目录检查是否直接支持IOMMU分组配置IOMMU分组不直接支持的需要更新内核参考检查是否直接支持IOMMU分组 下面 以SATA控制器为例,看pci设备是否可以直接支持IOMMU分组 /* 打印pci设备详细信息*/ lspci -vv /* 找到SATA controller 段落*/ 16:00.1 SATA controll…...
深入讲解Kubernetes架构-node
Kubernetes 通过将容器放入在节点(Node)上运行的 Pod 中来执行你的工作负载。 节点可以是一个虚拟机或者物理机器,取决于所在的集群配置。 每个节点包含运行 Pod 所需的服务; 这些节点由控制面负责管理。通常集群中会有若干个节点…...
XSS-labs-master
XSS 经典14关这边先说一下常用的弹窗手法<script>alert(1)</script> <script>confirm(1)</script> <script>alert(1)</script> <script>alert(/1/zyl)</script> <script>alert(document.cookie)</script> <scr…...
「可信计算」助力TLS 传输更安全
序言背景(Satuation):TLS 是 TCP/IP 上的传输层安全协议,保护着数以亿万级的数据安全,我们在浏览器中输入的 https,就是受到 TLS 保护的。冲突(complication):从可信计算…...
链表学习基础
链表 通过指针串联在一起的线性结构,每个节点由数据域和指针域两部分组成。链表节点在内存中的存储通常不是连续的,各节点通过指针连接在一起,其内存分布大致如下图所示。 定义 单链表 struct ListNode {// DATATYPE 可以是任意存放数据的…...
springboot整合阿里云oss文件服务器
springboot整合阿里云oss文件服务器一、申请Bucket二、 获取AccessKey ID、AccessKey Secret三、 springboot整合3.1 在application.yml 配置参数3.2 oss需要的pom3.3 配置 oss配置类3.4 oss的controller类3.5 oss的service类以及impl一、申请Bucket 进入该网址对象存储oss述 …...
数据分析:旅游景点销售门票和消费情况分析
数据分析:旅游景点销售门票和消费情况分析 文章目录数据分析:旅游景点销售门票和消费情况分析一、前言二、数据准备三、分析数据四、用户购买门票数量分析五、用户复购分析六、用户回购分析七、占比分析1.每个月分层用户占比情况。2.每月不同用户的占比3…...
Android问题解决方案(一):Android 打空包后提示没有”android:exported“的属性设置
Android 打空包后提示没有”android:exported“的属性设置Android 打空包后提示没有”android:exported“的属性设置1、问题:2、文档3、参考链接:4、解决方案:Android 打空包后提示没有”android:exported“的属性设置 1、问题: …...
Portraiture2023最新版人像图像后期处理软件
2023全新发布Portraiture 4是专注于图像后期处理软件研发的 Imagenomic, LLC产品之一,在摄影爱好者中有点影响力。Portraiture可以将繁琐复杂的人像磨皮操作极致简化,不论是普通爱好者或专业后期处理人员,均能一键完成。凭借优秀的AI算法和多…...
链表OJ(七)删除有序链表中重复的元素-I -II
目录 删除有序链表中重复的元素-I 删除有序链表中重复的元素-II 删除有序链表中重复的元素-I 描述 删除给出链表中的重复元素(链表中元素从小到大有序),使链表中的所有元素都只出现一次 例如: 给出的链表为1→1→21→1→2,返回1…...
C语言经典编程题100例(81~100)
目录81、习题7-7 字符串替换82、习题8-10 输出学生成绩83、习题8-2 在数组中查找指定元素84、习题8-3 数组循环右移85、题8-9 分类统计各类字符个数86、习题9-2 计算两个复数之积87、习题9-6 按等级统计学生成绩88、习题11-1 输出月份英文名89、习题11-2 查找星期90、练习10-1 …...
ChIP-seq 分析:数据质控实操(5)
1. 数据 今天将继续回顾我们在上一次中研究的 Myc ChIPseq。这包括用于 MEL 和 Ch12 细胞系的 Myc ChIPseq 及其输入对照。 可在此处[1]找到 MEL 细胞系中 Myc ChIPseq 的信息和文件可在此处[2]找到 Ch12 细胞系中 Myc ChIPseq 的信息和文件可以在此处[3]找到 MEL 细胞系的输入…...
java黑马头条 day5自媒体文章审核 敏感词过滤算法DFA 集成RabbitMQ实现自动审核
自动审核流程介绍 做为内容类产品,内容安全非常重要,所以需要进行对自媒体用户发布的文章进行审核以后才能到app端展示给用户。2 WmNews 中status 代表自媒体文章的状态 status字段:0 草稿 1 待审核 2 审核失败 3 人工审核 4 人工审核通过 …...
观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...
6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础
第三周 Day 3 🎯 今日目标 理解类(class)和对象(object)的关系学会定义类的属性、方法和构造函数(init)掌握对象的创建与使用初识封装、继承和多态的基本概念(预告) &a…...
前端高频面试题2:浏览器/计算机网络
本专栏相关链接 前端高频面试题1:HTML/CSS 前端高频面试题2:浏览器/计算机网络 前端高频面试题3:JavaScript 1.什么是强缓存、协商缓存? 强缓存: 当浏览器请求资源时,首先检查本地缓存是否命中。如果命…...
高防服务器价格高原因分析
高防服务器的价格较高,主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因: 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器,因此…...
【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据(33个指标)
旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。 今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据!该数据集源自2025年4月发表于《地理学报》的论文成果…...
