实现防抖函数并支持第一次立刻执行(vue3 + ts环境演示)
1、先看一效果:

2、实现思路:
- 使用定时器setTimeout和闭包实现常规防抖功能;
- 增加immediate字段控制第一次是否执行一次函数(true or false);
- 增加一个flag标识,在第一次执行时,将标识标识为true,同时通过使用定时器设置flag=false(防止用户是一次一次地触发,导致下一轮第一次无法触发事件);
- 在第二次触发回调函数时将flag设置false,为了第二轮触发防抖时,第一次也会执行函数。
3、防抖函数实现:
// 自定义防抖函数,支持传入等待时间(wait)、立即执行标识(immediate)等参数。
export const customDebounce = function (fn: Function,wait = 500,immediate: boolean
) {let timeID: number | null;let flag = false;return function (...args: any[]) {// 控制每轮第一次进来时,都会执行一次函数,flag=true,并returnif (!timeID && !flag && immediate) {fn.apply(this, args);flag = true;// 设置一个定时器,在wait毫秒后,将flag设置为false// 防止用户每轮都是一次一次触发事件,导致flag一直为true,导致下一轮第一次无法再次触发事件setTimeout(() => {flag = false;}, wait);return;}if (timeID) {clearTimeout(timeID);}timeID = setTimeout(() => {fn.apply(this, args);timeID = null;// 控制每轮第二次执行操作时,设置flag为false// 使得下一轮进来时,可以立刻执行一次函数flag = false;}, wait) as unknown as number;};
};
4、vue3 + element-plus 组合式API单页面使用:
<script setup lang="ts">
import { ref } from "vue";
import { customDebounce } from "@/utils/utils";
const inputVal = ref();
const inputChange = customDebounce(args => {console.log("函数执行了", args);},1000,true
);
</script><template><div class="custom-debounce"><el-input v-model="inputVal" @input="inputChange" /></div>
</template><style scoped lang="scss"></style>相关文章:
实现防抖函数并支持第一次立刻执行(vue3 + ts环境演示)
1、先看一效果: 2、实现思路: 使用定时器setTimeout和闭包实现常规防抖功能;增加immediate字段控制第一次是否执行一次函数(true or false);增加一个flag标识,在第一次执行时,将标…...
WPF —— DataGrid数据网格
1 :DataGrid简介 DataGrid 是数据网格 : 可以显示网格数据的控件,通过自定义列模版 来去实现各种网格效果 , 可以使用以下几中标签显示不同数据 2 :DataGrid常用的组件 显示文本: DataGridTextColumn 显示复选框: DataGridChec…...
牛客题霸-SQL进阶篇(刷题记录一)
本文基于前段时间学习总结的 MySQL 相关的查询语法,在牛客网找了相应的 MySQL 题目进行练习,以便加强对于 MySQL 查询语法的理解和应用。 由于涉及到的数据库表较多,因此本文不再展示,只提供 MySQL 代码与示例输出。 部分题目因…...
网络安全实训Day12
写在前面 注意根据笔记中的缩进判断该文本所在层级。 网络空间安全实训-网络安全技术 SSL VPN SSL协议 定义:一种应用层的安全保护技术 工作流程 1.客户端与服务器通过三次握手建立TCP连接 2.客户端向服务器发送Client-Hello信息,消息中包含希望访问的…...
对话Midjourney创始人:图片仅是起步,人工智能将全面改变学习、创意和组织。
ChatGPT狂飙160天,世界已经不是之前的样子。 新建了人工智能中文站https://ai.weoknow.com 每天给大家更新可用的国内可用chatGPT资源 发布在https://it.weoknow.com 关注我 Midjourney 是一家神奇的公司,11 人改变世界,创造伟大的产品。…...
Elasticsearch:将 ILM 管理的数据流迁移到数据流生命周期
警告:此功能处于技术预览阶段,可能会在未来版本中更改或删除。 Elastic 将努力解决任何问题,但技术预览版中的功能不受官方 GA 功能的支持 SLA 的约束。目前的最新版本为 8.12。 在本教程中,我们将了解如何将现有数据流࿰…...
LeetCode刷题记录——day6
1、https://leetcode.cn/problems/length-of-last-word/description/?envTypestudy-plan-v2&envIdtop-interview-150 直接从后往前遍历就好 class Solution { public:int lengthOfLastWord(string s) {int length0;int lens.length();for(int ilen-1;i>0;i--){if(s[i]…...
C++String类
1. 前言 String是C中操作字符串的类,它是在比较早的时候设计的STL模板,因此在某些地方设计的有些冗余 对于String类,不仅仅是学会使用它,更重要的是要从底层去理解它;本篇文章将从底层出发,模拟实现常用的S…...
Linux docker7--私有镜像仓库registry和UI搭建及使用
一、对于开源的镜像,如redis,nginx等,可以通过官方仓库Docker Hub,或者国内的阿里云等共有仓库下载获取到镜像。但是企业内对于自己的研发产品不可能往公共仓库去发布镜像的,一般都会搭建私有的镜像仓库,保…...
IDS入侵检测系统分为两大类。
一、基于签名的IDS和基于异常的IDS。 基于签名的Ids主要依赖于已知的攻击模式库来检测入侵行为,适用于检测已知的攻击模式。 基于异常的Ids则关注网络流量的行为特征,通过分析数据包之间的关系和统计模型来判断是否存在异常行为,更适用于检…...
为什么元素显示的样式跟我设置的不一样?CSS优先级详解
一、什么是CSS中的选择器优先级? 在CSS中,选择器优先级是指确定应用于元素的最相关CSS声明的算法。这个优先级决定了哪个样式规则将被应用到元素上。根据选择器的类型和特定性,CSS规定了不同的优先级,例如ID选择器比类选择器具有更…...
C语言动态内存的管理
前言 本篇博客就来探讨一下动态内存,说到内存,我们以前开辟空间大小都是固定的,不能调整这个空间大小,于是就有动态内存,可以让我们自己选择开辟多少空间,更加方便,让我们一起来看看动态内存的有…...
CASIA数据集转png HWDB2.0-2.2
https://nlpr.ia.ac.cn/databases/handwriting/Home.html CASIA在线和离线中文手写数据库 https://nlpr.ia.ac.cn/databases/handwriting/Offline_database.html CASIA-HWDB2.0-2.2 离线文本数据库是由孤立字符数据集的作者制作的。每人撰写了五页给定文本。由于数据丢失&a…...
学习或复习电路的game推荐:nandgame(NAND与非门游戏)、Turing_Complete(图灵完备)
https://www.nandgame.com/ 免费 https://store.steampowered.com/app/1444480/Turing_Complete/ 收费,70元。据说可以导出 Verilog !...
前端面试题《react》
说说React render方法的原理?在什么时候会被触发? render函数里面可以编写JSX,转化成createElement这种形式,用于生成虚拟DOM,最终转化成真实DOM 在 React 中,类组件只要执行了 setState 方法,…...
快速入门Kotlin③类与对象
类 构造函数 主构造函数:主构造函数是类头的一部分,它跟在类名后面。主构造函数没有函数体,它可以包含初始化代码和属性声明。初始化块:init关键字修饰,它直接写在类体中。它的执行顺序与它们在类体中的出现顺序一致。 次构造函数:次要构造函数是可选的,用于提供额外…...
RUST:Arc (Atomic Reference Counted) 原子引用计数
在Rust编程语言中,Arc 是一个智能指针类型,全称为 "Atomic Reference Counted"(原子引用计数)。它的主要作用是提供线程安全的共享所有权机制,使得多个线程可以同时持有同一个数据结构的访问权,并…...
从0写一个问卷调查APP的第13天-1
1.今日任务 我也只是一个大学生,有什么思路不对的地方给我指出来哟! 分析:上次我们实现了任务调查的插入。但是我们插入的问卷调查只有它的标题,也就是这个问卷调查是什么我们告诉数据库了,但是现在我们还没有给它添加任何问题&…...
20.Python从入门到精通—参数 位置参数 关键字参数 默认参数 匿名函数 return 语句 强制位置参数
20.从入门到精通:参数 位置参数 关键字参数 默认参数 匿名函数 return 语句 强制位置参数 参数位置参数关键字参数默认参数 匿名函数return 语句强制位置参数 参数 在Python中,函数可以接受任意数量的参数,包括位置参数、关键字参数和默认参数。以下是这…...
Python爬虫之requests库
1、准备工作 pip install requests 2、实例 urllib库中的urlopen方法实际上就是以GET方式请求网页,requests库中相应的方法就是get方法。 import requestsr requests.get(https://www.baidu.com/) print(type(r)) # <class requests.models.Response> 响…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
高等数学(下)题型笔记(八)空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
Unity中的transform.up
2025年6月8日,周日下午 在Unity中,transform.up是Transform组件的一个属性,表示游戏对象在世界空间中的“上”方向(Y轴正方向),且会随对象旋转动态变化。以下是关键点解析: 基本定义 transfor…...
起重机起升机构的安全装置有哪些?
起重机起升机构的安全装置是保障吊装作业安全的关键部件,主要用于防止超载、失控、断绳等危险情况。以下是常见的安全装置及其功能和原理: 一、超载保护装置(核心安全装置) 1. 起重量限制器 功能:实时监测起升载荷&a…...
python基础语法Ⅰ
python基础语法Ⅰ 常量和表达式变量是什么变量的语法1.定义变量使用变量 变量的类型1.整数2.浮点数(小数)3.字符串4.布尔5.其他 动态类型特征注释注释是什么注释的语法1.行注释2.文档字符串 注释的规范 常量和表达式 我们可以把python当作一个计算器,来进行一些算术…...
计算机系统结构复习-名词解释2
1.定向:在某条指令产生计算结果之前,其他指令并不真正立即需要该计算结果,如果能够将该计算结果从其产生的地方直接送到其他指令中需要它的地方,那么就可以避免停顿。 2.多级存储层次:由若干个采用不同实现技术的存储…...
