实现防抖函数并支持第一次立刻执行(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> 响…...
多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言:多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时,基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套:跨云网络构建数据…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC? WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音…...
