当前位置: 首页 > 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 人工审核通过 …...

CircuitJS1 Desktop Mod:跨平台离线电路仿真软件的终极指南

CircuitJS1 Desktop Mod&#xff1a;跨平台离线电路仿真软件的终极指南 【免费下载链接】circuitjs1 Standalone (offline) version of the Circuit Simulator with small modifications based on modified NW.js. 项目地址: https://gitcode.com/gh_mirrors/circ/circuitjs1…...

如何在Windows系统上一键部署终极包管理器:winget安装工具完全指南

如何在Windows系统上一键部署终极包管理器&#xff1a;winget安装工具完全指南 【免费下载链接】winget-install Install WinGet using PowerShell! Prerequisites automatically installed. Works on Windows 10/11 and Server 2019/2022. 项目地址: https://gitcode.com/gh…...

WinUtil:Windows系统优化与批量软件管理的终极解决方案

WinUtil&#xff1a;Windows系统优化与批量软件管理的终极解决方案 【免费下载链接】winutil Chris Titus Techs Windows Utility - Install Programs, Tweaks, Fixes, and Updates 项目地址: https://gitcode.com/GitHub_Trending/wi/winutil 还在为Windows系统优化和软…...

零依赖STL转STEP工具:5分钟实现3D格式无缝转换的完整指南

零依赖STL转STEP工具&#xff1a;5分钟实现3D格式无缝转换的完整指南 【免费下载链接】stltostp Convert stl files to STEP brep files 项目地址: https://gitcode.com/gh_mirrors/st/stltostp 在数字化制造和工程设计的交叉领域&#xff0c;STL到STEP格式转换已成为连…...

从PyQt5迁移到PyQt6:一个真实项目的踩坑与平滑升级实战记录

从PyQt5迁移到PyQt6&#xff1a;一个真实项目的踩坑与平滑升级实战记录 在Python GUI开发领域&#xff0c;PyQt一直是许多开发者的首选工具包。当PyQt6发布时&#xff0c;我们团队面临一个关键决策&#xff1a;是否要将正在开发中的数据分析平台从PyQt5迁移到新版本。这个决策不…...

Python热重载工具Reloadium:原理、配置与实战避坑指南

1. 项目概述&#xff1a;重新定义Python热重载的开发体验如果你是一名Python开发者&#xff0c;无论是做Web后端、数据分析脚本还是机器学习模型训练&#xff0c;大概率都经历过这样的场景&#xff1a;修改了一行代码&#xff0c;保存文件&#xff0c;然后不得不手动停止当前运…...

基于TypeScript的MCP服务器开发指南:为AI助手构建安全工具调用能力

1. 项目概述&#xff1a;一个为TypeScript开发者打造的MCP服务器最近在折腾AI应用开发&#xff0c;特别是想给Claude、Cursor这类智能助手扩展更强大的工具调用能力时&#xff0c;不可避免地接触到了Model Context Protocol。如果你也在研究如何让AI助手安全、可控地访问文件系…...

全网首份DeepSeek-MMLU交叉验证报告:在真实业务场景中,高分≠高可用——5类典型失败案例与鲁棒性加固方案

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek-MMLU基准测试成绩全景概览 MMLU&#xff08;Massive Multitask Language Understanding&#xff09;是评估大语言模型跨学科知识广度与推理能力的关键基准&#xff0c;涵盖57个学科领域&#…...

纯文本CRM:用Markdown与Git构建极简客户关系管理系统

1. 项目概述与核心价值最近在开源社区里&#xff0c;我注意到一个名为anthroos/plaintext-crm的项目&#xff0c;它提出了一种非常规的客户关系管理&#xff08;CRM&#xff09;思路。简单来说&#xff0c;这个项目主张用纯文本文件&#xff08;如 Markdown、TXT&#xff09;来…...

别再熬大夜改论文了!okbiye AI 写作,把毕业论文从选题到终稿焊在及格线以上

okbiye-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AI PPT毕业论文 - Okbiye智能写作https://www.okbiye.com/ai/bylw 打开电脑&#xff0c;对着空白的 Word 文档发呆&#xff0c;开题报告和初稿大纲改了又改&#xff0c;导师的红批注比正文还长&#xff0c;格…...