实现防抖函数并支持第一次立刻执行(vue3 + ts环境演示)

1、先看一效果
在这里插入图片描述

2、实现思路:

  1. 使用定时器setTimeout和闭包实现常规防抖功能;
  2. 增加immediate字段控制第一次是否执行一次函数(true or false);
  3. 增加一个flag标识,在第一次执行时,将标识标识为true,同时通过使用定时器设置flag=false(防止用户是一次一次地触发,导致下一轮第一次无法触发事件);
  4. 在第二次触发回调函数时将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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/759522.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【go从入门到精通】for循环控制

前言 Go 语言提供了 for 循环语句&#xff0c;用于重复执行一段程序逻辑&#xff0c;直到循环条件不再满足时终止。 循环可以用于迭代各种数据结构&#xff08;例如切片、数组、映射或字符串&#xff09;中的元素 本文将很基础的for循环语法&#xff0c;循环嵌套&#…

二、阅读器的开发(初始)-- 1、阅读器简介及开发准备工作

1、阅读器工作原理及开发流程 1.1阅读器工作原理简介 电子书&#xff08;有txt、pdf、epub、mobi等格式&#xff09;->解析&#xff08;书名、作者、目录、封面、章节等&#xff09;->&#xff08;通过阅读器引擎&#xff09;渲染 -> 功能&#xff08;字号、背景色、…

PHP页面如何实现设置独立访问密码

PHP网页如果需要查看信息必须输入密码&#xff0c;验证后才可显示出内容的代码如何实现&#xff1f; 对某些php页面设置单独的访问密码,如果密码不正确则无法查看内容,相当于对页面进行了一个加密。 如何实现这个效果&#xff0c;详细教程可以参考&#xff1a;PHP页面如何实现…

谁将主导未来AI市场?Claude3、Gemini、Sora与GPT-4的技术比拼

【最新增加Claude3、Gemini、Sora、GPTs讲解及AI领域中的集中大模型的最新技术】 2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚…

前后端分离项目springsecurity实现用户登录认证快速使用

目录 1、引入依赖 2、创建类继承WebSecurityConfigurerAdapter &#xff08;1&#xff09;重写里面的configure(HttpSecurity http)方法 &#xff08;2&#xff09;重写AuthenticationManager authenticationManagerBean() &#xff08;3&#xff09;密码加密工具 3、继承…

实战打靶集锦-027-SoSimple1

文章目录 1.主机发现2. 端口扫描3. 服务枚举4. 服务探查5. 提权5.1 枚举系统信息5.2 枚举定时任务5.3 查看passwd文件5.4 枚举可执行文件5.5 查看家目录5.6 Linpeas提权 6. 获取flag 靶机地址&#xff1a;https://download.vulnhub.com/sosimple/So-Simple-1.7z 1.主机发现 目…

阿里云99元服务器40G ESSD Entry系统盘够用吗?

阿里云99元服务器40G ESSD Entry云盘够用吗&#xff1f;够用&#xff0c;操作系统占15GB左右&#xff0c;还有25G富余。如果是40G ESSD Entry系统盘不够用&#xff0c;还可以为云服务器另外挂载数据盘&#xff0c;所以不用担心40G系统盘不够用。可以在阿里云CLUB中心查看 aliyu…

Flutter 3.13 之后如何监听 App 生命周期事件

在 Flutter 中&#xff0c;您可以监听多个生命周期事件来处理应用程序的不同状态&#xff0c;但今天我们将讨论 didChangeAppLifecycleState 事件。每当应用程序的生命周期状态发生变化时&#xff0c;就会触发此事件。可能的状态有 resumed 、 inactive 、 paused 、 detached …

idea使用git笔记

1.创建分支和切换分支 创建分支 切换分支 2.把新创建的分支提交到远程服务器上&#xff08;注&#xff1a;如果没有提交的&#xff0c;随便找个文件修改再提交&#xff09; (1)切换到要提交的分支&#xff0c;add (2)commit (3)push 3.在自己分支修改代码及提交到自己的远…

【K3s】在 AWS EC2 上运行生产 K3s 集群

【K3s】在 AWS EC2 上运行生产 K3s 集群 本文将介绍如何在 AWS EC2 上运行 K3s。您将创建一个 EC2 实例并在 AWS 上运行单节点 K3s 集群。 自托管的 K3s 允许您在裸金属上运行 Kubernetes,并应用较小、低资源工作负载的原则。哦,你还可以控制你的控制平面。这有点像逃离托管…

Python Qt Designer 初探

代码下载在最下面 #开发环境安装# 本示例在Windows11下, 使用VSCode开发, Python 3.12.2, Qt Designer 5.11 VSCode插件Python、Python Debugger、PYQT Integration、Pylance (准备) VSCode自行官网下载 Visual Studio Code - Code Editing. Redefined (准备) Python 直接…

上位机图像处理和嵌入式模块部署(qmacvisual拟合直线)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 测量是图像处理的一个基本技能。那么测量的前提&#xff0c;就是我们需要在图像中找出特定的集合图形&#xff0c;比如说直线。当然&#xff0c;发…

# Maven Bom 的使用

Maven Bom 的使用 文章目录 Maven Bom 的使用概述BOM特点优点缺点 MavenMaven 安装安装步骤settingx.ml常用仓库地址Idea 使用maven常见坑 SpringBoot 项目Bom使用案例项目结构主项目 zerocode-back-servezc-dependency&#xff08;第三方jar管理&#xff09;子模块zc-serve子模…

手机运营商二要素检测:重塑信任基石,筑牢信息安全屏障

随着移动互联网的普及和数字经济的快速发展&#xff0c;用户信息安全的重要性日益凸显。运营商二要素检测作为一种强大的安全验证机制&#xff0c;以其精准匹配与实时验证的特性&#xff0c;为各类应用场景提供了一种可靠的身份识别解决方案&#xff0c;正在成为众多企业和服务…

PyTorch 深度学习(GPT 重译)(六)

十四、端到端结节分析&#xff0c;以及接下来的步骤 本章内容包括 连接分割和分类模型 为新任务微调网络 将直方图和其他指标类型添加到 TensorBoard 从过拟合到泛化 在过去的几章中&#xff0c;我们已经构建了许多对我们的项目至关重要的系统。我们开始加载数据&#xf…

11种创造型设计模式(下)

观察者模式 我们可以比喻观察者模式是一种类似广播的设计模式 介绍 观察者模式&#xff1a;对象之间多对一依赖的一种设计方案&#xff0c;被依赖的对象是Subject&#xff0c;依赖的对象是Observer&#xff0c;Subject通知Observer变化。 代码 说明&#xff1a; WeatherStat…

【百度灵境矩阵实训营】操作指南

【百度灵境矩阵实训营】操作指南 写在最前面提交注意事项比赛参与指南1、创建智能体作品要求 2、提交作品 学习资料包 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字篆刻时光&#xff0c;感谢你的陪伴与支持 ~ &#x1f680; 欢迎一起踏上探险之旅&…

Docker容器化技术(docker-compose示例:部署discuz论坛和wordpress博客,使用adminer管理数据库)

安装docker-compose [rootservice ~]# systemctl stop firewalld [rootservice ~]# setenforce 0 [rootservice ~]# systemctl start docker[rootservice ~]# wget https://github.com/docker/compose/releases/download/v2.5.0/docker-compose-linux-x86_64创建目录 [rootse…

用纯C语言实现空气压强和电压关系

已知P是真空度&#xff0c;U是电压&#xff0c;C是3.572&#xff08;以PA为单位&#xff09;&#xff0c;P10**(U-C)/1.286 1、使用 math.h 头文件中提供的函数&#xff0c;比如 pow() 来计算幂 #include <stdio.h> #include <math.h>int main() {double U; // 电…

接口测试、postman、测试点提取【主】

接口测试是测试系统组件间接口的一种测试 接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点 测试的重点是要检查数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及系统间的相互逻辑依赖关系 文章目录 HTTP接口 & Web Service接口RESTful接口…