TypeScript延迟执行工具类

TypeScript延迟执行工具类

在前端开发中,我们经常需要处理一些延迟执行、防抖和节流的场景。今天介绍一个实用的Delay工具类,它提供了这些常用的延迟执行功能。

文章目录

  • TypeScript延迟执行工具类
    • 0、完整代码
    • 1. 基础延迟执行
      • sleep方法
      • execute方法
    • 2. 防抖(Debounce)
      • 实现原理
      • 使用示例
    • 3. 节流(Throttle)
      • 实现原理
      • 使用示例
    • 防抖和节流的区别
    • 总结

0、完整代码

/*** 延迟执行工具类*/
export class Delay {/*** 延迟指定时间* @param ms 延迟的毫秒数* @returns Promise对象*/static sleep(ms: number): Promise<void> {return new Promise(resolve => setTimeout(resolve, ms));}/*** 延迟执行函数* @param fn 要执行的函数* @param ms 延迟的毫秒数* @returns Promise对象,包含函数执行结果*/static async execute<T>(fn: () => T | Promise<T>, ms: number): Promise<T> {await this.sleep(ms);return await fn();}/*** 创建防抖函数* @param fn 要执行的函数* @param ms 延迟时间* @returns 防抖后的函数*/static debounce<T extends (...args: any[]) => any>(fn: T, ms: number): (...args: Parameters<T>) => void {let timeoutId: NodeJS.Timeout;return function (...args: Parameters<T>) {clearTimeout(timeoutId);timeoutId = setTimeout(() => fn.apply(this, args), ms);};}/*** 创建节流函数* @param fn 要执行的函数* @param ms 间隔时间* @returns 节流后的函数*/static throttle<T extends (...args: any[]) => any>(fn: T, ms: number): (...args: Parameters<T>) => void {let isThrottled = false;return function (...args: Parameters<T>) {if (!isThrottled) {fn.apply(this, args);isThrottled = true;setTimeout(() => isThrottled = false, ms);}};}
}

1. 基础延迟执行

sleep方法

sleep方法提供了一个简单的延迟执行功能:

// 延迟2秒
await Delay.sleep(2000);
console.log('2秒后执行');// 在async函数中使用
async function demo() {console.log('开始');await Delay.sleep(1000);console.log('1秒后');
}

execute方法

execute方法可以延迟执行一个函数:

// 延迟3秒执行函数
const result = await Delay.execute(() => {return '延迟执行的结果';
}, 3000);// 异步函数示例
await Delay.execute(async () => {const response = await fetch('https://api.example.com/data');return response.json();
}, 1000);

2. 防抖(Debounce)

防抖是指在短时间内多次触发同一个函数,只执行最后一次。典型场景包括:

  • 搜索框输入
  • 窗口调整
  • 按钮点击

实现原理

每次触发时都会清除之前的定时器,重新设置一个新的定时器,确保只有在指定时间内没有新的触发时才执行函数。

使用示例

// 创建防抖函数
const debouncedSearch = Delay.debounce((searchTerm: string) => {console.log('搜索:', searchTerm);
}, 500);// 在输入框onChange事件中使用
<input onChange={(e) => debouncedSearch(e.target.value)} />// 窗口调整示例
const debouncedResize = Delay.debounce(() => {console.log('窗口大小改变');
}, 200);window.addEventListener('resize', debouncedResize);

3. 节流(Throttle)

节流是指在一定时间间隔内只执行一次函数,无论这个函数被调用多少次。典型场景包括:

  • 滚动事件处理
  • 频繁点击
  • 游戏中的射击

实现原理

通过一个标志位控制函数执行,在指定时间间隔内,该标志位为true时阻止函数执行,时间到后将标志位设为false允许下次执行。

使用示例

// 创建节流函数
const throttledScroll = Delay.throttle(() => {console.log('页面滚动');
}, 200);// 在滚动事件中使用
window.addEventListener('scroll', throttledScroll);// 游戏射击示例
const throttledShoot = Delay.throttle(() => {console.log('发射子弹');
}, 1000);button.addEventListener('click', throttledShoot);

防抖和节流的区别

  1. 防抖(Debounce):

    • 多次触发,只执行最后一次
    • 适合输入框实时搜索等场景
    • 重在清除之前的定时器
  2. 节流(Throttle):

    • 一定时间内只执行一次
    • 适合滚动事件、频繁点击等场景
    • 重在控制执行频率

总结

这个Delay工具类提供了四个实用的方法:

  • sleep: 基础延迟
  • execute: 延迟执行函数
  • debounce: 创建防抖函数
  • throttle: 创建节流函数

通过合理使用这些方法,可以有效控制函数的执行时机,优化性能,提升用户体验。在实际开发中,要根据具体场景选择合适的方法使用。

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

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

相关文章

RustRover加载Rust项目报错

问题描述&#xff1a; 昨天还可以正常使用的RustRover今天打开Rust项目一直报错&#xff1a; warning: spurious network error (3 tries remaining): [7] Couldnt connect to server (Failed to connect to 127.0.0.1 port 51342 after 105750 ms: Couldnt connect to server…

C语言---文件操作万字详细分析(6)

文件操作 到这里&#xff0c; C语言所有知识点&#xff0c; 就告已段落了&#xff0c; 虽然知识点到这里结束了&#xff0c; 但我想&#xff0c; 我们的编程之路也可能刚刚开始&#xff0c; 这些知识&#xff0c; 是我们在创造伟大事物时&#xff0c; 必不可少的基础&#xff…

回溯——3、5升杯倒4升水

回溯应用 接前面书上说数学浅谈最大公约数g c d ( a , b ) = x ∗ a + y ∗ b gcd(a,b)=x*a+y*b gcd(a,b)=x∗a+y∗bP 3 2 = 6 P_{3}^{2}=6 P32​=6只要一杯8升水代码一般回溯方法的程序结构打印接前面 递归的改造——间隔挑硬币打印所挑选的硬币需要用到回溯。但书上的回溯没…

clickhouse 安装配置

1.clickhouse官网下载安装包&#xff1a; 官网下载地址&#xff1a; https://packages.clickhouse.com/tgz/ 下载四个tgz文件&#xff1a; 1 clickhouse-common-static 2 clickhouse-common-static-dbg 3 clickhouse-server 4 clickhouse-client 2 安装上面1到4的顺序依…

STM32学习记录---jlink使用

SEGGER J-Flash V6.82g下载程序&#xff1b; 硬件&#xff1a;ARM仿真器 swd口 过程&#xff1a; 1.打开软件&#xff0c;会提示是否打开上一次的.jflash文件&#xff1b; 2.新建工程 3.选择器件&#xff0c;找不到&#xff0c;可以找相近的或者相近的核心 4.选择完成&…

IPsec传输模式与隧道模式的深度解析及应用实例

随着网络安全威胁的日益严峻&#xff0c;IPsec作为网络层安全协议&#xff0c;其传输模式与隧道模式的选择对确保通信安全至关重要。本文旨在深入探讨这两种模式的差异&#xff0c;并通过实际案例展示其应用。 一、传输模式和隧道模式的详细描述 传输模式&#xff1a; 应用场景…

A014-基于Spring Boot的家电销售展示平台设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

代码随想录第十六天| 513.找树左下角的值 、112. 路径总和 、113. 路径总和 II、106、从中序与后序遍历序列构造二叉树

513. 找树左下角的值 题目描述 给定一个二叉树&#xff0c;找到树的最后一行最左边的节点值。 解题思路 深度优先遍历 (DFS)&#xff1a;使用深度优先遍历来查找树的左下角值。记录最大深度&#xff1a;定义 maxDepth 变量&#xff0c;用于记录遍历时的最大深度。更新左下角…

triangle_area_calculators库发布

最近将在pip网站上发布triangle_area_calculators库&#xff08;我编写的python第三方库&#xff09; triangle_area_calculators库用于计算不同类型及不同已知量的三角形面积 在triangle_area_calculators库中&#xff0c;有一个名为TriangleAreaCalculators的类 可以通过f…

分布式数据库:核心概念、架构设计及应用实践

随着互联网和大数据技术的迅猛发展&#xff0c;传统单体数据库架构在处理大规模数据、支持高并发访问方面面临严峻挑战。分布式数据库应运而生&#xff0c;以其高可用性、扩展性和容错能力&#xff0c;逐渐成为现代化企业数据库架构的主流选择。本文将系统性地介绍分布式数据库…

2024年北京海淀区中小学生信息学竞赛校级预选赛试题

2024年北京海淀区中小学生信息学竞赛校级预选赛试题 题目总数&#xff1a;24 总分数&#xff1a;100 编程基础知识单选题 第 1 题 单选题 关于 2024年海淀区信息学竞赛的描述错误的是( ) A.报名在网上报名系统进行 B.必须经过学籍所在学校的指导教师审核 C.学校…

软件测试学习笔记丨Vue常用指令-输入绑定(v-model)

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/23461 指令 指令是将一些特殊行为应用到页面DOM元素的特殊属性 格式都是以v-开始的&#xff0c;例如&#xff1a; v-model&#xff1a;双向绑定v-if和v-else&#xff1a;元素是否存在v-sho…

PySpark 本地开发环境搭建与实践

目录 一、PySpark 本地开发环境搭建 &#xff08;一&#xff09;Windows 本地 JDK 和 Hadoop 的安装 &#xff08;二&#xff09;Windows 安装 Anaconda &#xff08;三&#xff09;Anaconda 中安装 PySpark &#xff08;四&#xff09;Pycharm 中创建工程 二、编写代码 …

解决 Spring 异步处理中的 JDK 动态代理问题及相关错误分析

解决 Spring 异步处理中的 JDK 动态代理问题及相关错误分析 遇到的问题&#xff1a; 在使用 Spring 的 Async 注解开启异步处理时&#xff0c;遇到以下错误&#xff1a; The bean ServiceImplChannel could not be injected as a com.wn.order.pay.recharge.controller.Serv…

UI自动化测试 —— CSS元素定位实践!

前言 自动化测试元素定位是指在自动化测试过程中&#xff0c;通过特定的方法或策略来准确识别和定位页面上的元素&#xff0c;以便对这些元素进行进一步的操作或断言。这些元素可以是文本框、按钮、链接、图片等HTML页面上的任何可见或不可见的组件。 在自动化测试中&#xf…

封装一个请求的hook(react函数组件)

对于后台系统&#xff0c;上面筛选&#xff0c;下面表格分页的页面&#xff0c;这个hook非常实用 omitBy方法&#xff1a;过滤不为undefined的对象属性 export const omitBy <T extends IObject, K extends keyof T>(object:T, predicate:(value:T[K]) > boolean):I…

AI大模型重塑软件开发:流程、优势、挑战与展望

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

一篇文章教会你,Pycharm 的常用配置及快捷键~

每一位Python开发者都熟悉PyCharm这个强大的IDE&#xff0c;它提供了丰富的功能来提高编程效率。但你是否充分利用了PyCharm的所有配置和快捷键&#xff1f;今天&#xff0c;我们就来深度剖析PyCharm的常用配置和快捷键&#xff0c;让你从入门到精通&#xff0c;提升编程效率&a…

聚划算!Transformer-LSTM、Transformer、CNN-LSTM、LSTM、CNN五模型多变量回归预测

聚划算&#xff01;Transformer-LSTM、Transformer、CNN-LSTM、LSTM、CNN五模型多变量回归预测 目录 聚划算&#xff01;Transformer-LSTM、Transformer、CNN-LSTM、LSTM、CNN五模型多变量回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 聚划算&#xff01;Tran…

【网络安全】|kali中安装nessus

1、使用 df -h 命令查看磁盘使用情况&#xff0c;确保磁盘容量大于40G 简单粗暴办法&#xff1a;重装系统&#xff0c;装系统中注意磁盘空间相关的选项 //磁盘扩容&#xff1a;https://wiki.bafangwy.com/doc/670/ 2、安装 nessus 安装教程 https://blog.csdn.net/Cairo_A/a…