当前位置: 首页 > news >正文

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:简单理解防抖和节流,如何定义防抖和节流函数?

防抖 防抖函数&#xff0c;就是防止抖动&#xff0c;避免事件重复触发。比如监听输入框的输入&#xff0c;不应该在用户每输入一个字符就触发监听&#xff0c;而是在用户输入结束后再来监听。 流程为&#xff1a; 1、事件触发&#xff1b; 2、开启定时器&#xff1b; 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前言 坦白说&#xff0c;这一章我认为是整个opencv系列最难的一张&…...

【C语言刷题】倒置字符串

解题思路与过程&#x1f4fd;️解题思路&#x1f4fd;️解题过程&#x1f527;1.输入&#x1f527;2.设计逆序函数&#x1f527;3.逆序整个字符串&#x1f527;4.逆序每个单词&#x1f4fd;️源码&#x1f4f7;先来看题&#x1f447;&#x1f4fd;️解题思路 &#x1f534; 首先…...

用switch语句编程设计一个简单的计算器程序,要求根据用户从键盘输入的表达式:

用switch语句编程设计一个简单的计算器程序&#xff0c;要求根据用户从键盘输入的表达式&#xff1a;操作数1 运算符op 操作数2计算表达式的值&#xff0c;指定的算术运算符为加&#xff08;&#xff09;、减&#xff08;-&#xff09;、乘&#xff08;*&#xff09;、除&#…...

uboot编译分析

uboot编译分析 V 1 –> Q ,在一行命令前面加上表示不会在终端输出命令 KCONFIG_CONFIG ? .config.config 默认是没有的&#xff0c;默认是需要使用命令“make xxx_defconofig”先对uboot进行配置&#xff0c;配置完成就会在uboot根目录下生成.config。如果后续自行调整…...

SpringCloud Alibaba集成Dubbo实现远程服务间调用

SpringCloud Alibaba集成Dubbo实现远程服务间调用 工程创建 一、创建springBoot分模块项目&#xff0c;父工程&#xff1a;springcloud-alibaba以及子模块product-dubbo-provider、order-dubbo-consumer等 项目基本结构图如下所示&#xff1a; 二、依赖引入 在以上两个子模块…...

网络编程(一)

网络编程 文章目录网络编程前置概念1- 字节序高低地址与高低字节高低地址&#xff1a;高低字节字节序大端小端例子代码判断当前机器是大端还是小端为何要有字节序字节序转换函数需要字节序转换的时机例子一例子二2- IP地址转换函数早期(不用管)举例现在与字节序转换函数相比:**…...

PVE硬件直通之强制IOMMU分组

文章目录检查是否直接支持IOMMU分组配置IOMMU分组不直接支持的需要更新内核参考检查是否直接支持IOMMU分组 下面 以SATA控制器为例&#xff0c;看pci设备是否可以直接支持IOMMU分组 /* 打印pci设备详细信息*/ lspci -vv /* 找到SATA controller 段落*/ 16:00.1 SATA controll…...

深入讲解Kubernetes架构-node

Kubernetes 通过将容器放入在节点&#xff08;Node&#xff09;上运行的 Pod 中来执行你的工作负载。 节点可以是一个虚拟机或者物理机器&#xff0c;取决于所在的集群配置。 每个节点包含运行 Pod 所需的服务&#xff1b; 这些节点由控制面负责管理。通常集群中会有若干个节点…...

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 传输更安全

序言背景&#xff08;Satuation&#xff09;&#xff1a;TLS 是 TCP/IP 上的传输层安全协议&#xff0c;保护着数以亿万级的数据安全&#xff0c;我们在浏览器中输入的 https&#xff0c;就是受到 TLS 保护的。冲突&#xff08;complication&#xff09;&#xff1a;从可信计算…...

链表学习基础

链表 通过指针串联在一起的线性结构&#xff0c;每个节点由数据域和指针域两部分组成。链表节点在内存中的存储通常不是连续的&#xff0c;各节点通过指针连接在一起&#xff0c;其内存分布大致如下图所示。 定义 单链表 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述 …...

数据分析:旅游景点销售门票和消费情况分析

数据分析&#xff1a;旅游景点销售门票和消费情况分析 文章目录数据分析&#xff1a;旅游景点销售门票和消费情况分析一、前言二、数据准备三、分析数据四、用户购买门票数量分析五、用户复购分析六、用户回购分析七、占比分析1.每个月分层用户占比情况。2.每月不同用户的占比3…...

Android问题解决方案(一):Android 打空包后提示没有”android:exported“的属性设置

Android 打空包后提示没有”android:exported“的属性设置Android 打空包后提示没有”android:exported“的属性设置1、问题&#xff1a;2、文档3、参考链接&#xff1a;4、解决方案&#xff1a;Android 打空包后提示没有”android:exported“的属性设置 1、问题&#xff1a; …...

Portraiture2023最新版人像图像后期处理软件

2023全新发布Portraiture 4是专注于图像后期处理软件研发的 Imagenomic, LLC产品之一&#xff0c;在摄影爱好者中有点影响力。Portraiture可以将繁琐复杂的人像磨皮操作极致简化&#xff0c;不论是普通爱好者或专业后期处理人员&#xff0c;均能一键完成。凭借优秀的AI算法和多…...

链表OJ(七)删除有序链表中重复的元素-I -II

目录 删除有序链表中重复的元素-I 删除有序链表中重复的元素-II 删除有序链表中重复的元素-I 描述 删除给出链表中的重复元素&#xff08;链表中元素从小到大有序&#xff09;&#xff0c;使链表中的所有元素都只出现一次 例如&#xff1a; 给出的链表为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实现自动审核

自动审核流程介绍 做为内容类产品&#xff0c;内容安全非常重要&#xff0c;所以需要进行对自媒体用户发布的文章进行审核以后才能到app端展示给用户。2 WmNews 中status 代表自媒体文章的状态 status字段&#xff1a;0 草稿 1 待审核 2 审核失败 3 人工审核 4 人工审核通过 …...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...