实现防抖函数并支持第一次立刻执行(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> 响…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如,可以更新、修复或替换图层数据源,修改图层的符号系统,甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...
