TypeScript Delay工具类：sleep、防抖与节流实现详解

前端开发常涉及延迟执行、防抖及节流场景。本文介绍一个实用的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延迟执行内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

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