TypeScript实用的Delay延迟执行工具类

 更新时间:2024年11月04日 11:46:45   作者:訾博ZiBo  
在前端开发中,我们经常需要处理一些延迟执行、防抖和节流的场景,今天介绍一个实用的Delay工具类,它提供了这些常用的延迟执行功能,下面我们就看看它的具体应用吧

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

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);

防抖和节流的区别

防抖(Debounce):

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

节流(Throttle):

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

总结

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

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

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

到此这篇关于TypeScript实用的Delay延迟执行工具类的文章就介绍到这了,更多相关TypeScript延迟执行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ES6新增的数组知识实例小结

    ES6新增的数组知识实例小结

    这篇文章主要介绍了ES6新增的数组知识,结合实例形式分析了ES6的数组新增知识点、使用技巧与相关注意事项,需要的朋友可以参考下
    2020-05-05
  • 用Javascript评估用户输入密码的强度(Knockout版)

    用Javascript评估用户输入密码的强度(Knockout版)

    早上看到博友6点多发的一篇关于密码强度的文章(连接),甚是感动(周末大早上还来发文)
    2011-11-11
  • JS仿Base.js实现的继承示例

    JS仿Base.js实现的继承示例

    这篇文章主要介绍了JS仿Base.js实现的继承,结合具体实例形式分析了javascript扩展操作及面向对象程序设计相关实现技巧,需要的朋友可以参考下
    2017-04-04
  • 轻松实现HTML和JS之间的转化的代码

    轻松实现HTML和JS之间的转化的代码

    轻松实现HTML和JS之间的转化的代码...
    2007-09-09
  • JavaScript实现向右伸出的多级网页菜单效果

    JavaScript实现向右伸出的多级网页菜单效果

    这篇文章主要介绍了JavaScript实现向右伸出的多级网页菜单效果,通过javascript调用页面元素属性的动态改变实现向右展开菜单效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • uni-app入门教程之组件的基本使用

    uni-app入门教程之组件的基本使用

    本文主要介绍了uni-app组件的基本使用,包括组件的引入、使用和常见问题解决方法,通过本文的学习,读者可以掌握uni-app组件的基本操作,为开发uni-app应用提供帮助,需要的朋友可以参考下
    2023-03-03
  • JS冒泡事件与事件捕获实例详解

    JS冒泡事件与事件捕获实例详解

    这篇文章主要介绍了JS冒泡事件与事件捕获,结合实例形式分析了javascript冒泡的原理与阻止冒泡的相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • JavaScript判断是否为数字的多种方法小结

    JavaScript判断是否为数字的多种方法小结

    这篇文章主要介绍了JavaScript判断是否为数字的多种方法小结,本文给大家分享三种方法,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • 对js eval()函数的一些见解

    对js eval()函数的一些见解

    下面小编就为大家带来一篇对js eval()函数的一些见解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • layer关闭当前窗口页面以及确认取消按钮的方法

    layer关闭当前窗口页面以及确认取消按钮的方法

    今天小编就为大家分享一篇layer关闭当前窗口页面以及确认取消按钮的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论