亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

TypeScript實(shí)用的Delay延遲執(zhí)行工具類(lèi)

 更新時(shí)間:2024年11月04日 11:46:45   作者:訾博ZiBo  
在前端開(kāi)發(fā)中,我們經(jīng)常需要處理一些延遲執(zhí)行、防抖和節(jié)流的場(chǎng)景,今天介紹一個(gè)實(shí)用的Delay工具類(lèi),它提供了這些常用的延遲執(zhí)行功能,下面我們就看看它的具體應(yīng)用吧

在前端開(kāi)發(fā)中,我們經(jīng)常需要處理一些延遲執(zhí)行、防抖和節(jié)流的場(chǎng)景。今天介紹一個(gè)實(shí)用的Delay工具類(lèi),它提供了這些常用的延遲執(zhí)行功能。

0、完整代碼

/**
 * 延遲執(zhí)行工具類(lèi)
 */
export class Delay {
    /**
     * 延遲指定時(shí)間
     * @param ms 延遲的毫秒數(shù)
     * @returns Promise對(duì)象
     */
    static sleep(ms: number): Promise<void> {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    /**
     * 延遲執(zhí)行函數(shù)
     * @param fn 要執(zhí)行的函數(shù)
     * @param ms 延遲的毫秒數(shù)
     * @returns Promise對(duì)象,包含函數(shù)執(zhí)行結(jié)果
     */
    static async execute<T>(fn: () => T | Promise<T>, ms: number): Promise<T> {
        await this.sleep(ms);
        return await fn();
    }

    /**
     * 創(chuàng)建防抖函數(shù)
     * @param fn 要執(zhí)行的函數(shù)
     * @param ms 延遲時(shí)間
     * @returns 防抖后的函數(shù)
     */
    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);
        };
    }

    /**
     * 創(chuàng)建節(jié)流函數(shù)
     * @param fn 要執(zhí)行的函數(shù)
     * @param ms 間隔時(shí)間
     * @returns 節(jié)流后的函數(shù)
     */
    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. 基礎(chǔ)延遲執(zhí)行

sleep方法

sleep方法提供了一個(gè)簡(jiǎn)單的延遲執(zhí)行功能:

// 延遲2秒
await Delay.sleep(2000);
console.log('2秒后執(zhí)行');

// 在async函數(shù)中使用
async function demo() {
    console.log('開(kāi)始');
    await Delay.sleep(1000);
    console.log('1秒后');
}

execute方法

execute方法可以延遲執(zhí)行一個(gè)函數(shù):

// 延遲3秒執(zhí)行函數(shù)
const result = await Delay.execute(() => {
    return '延遲執(zhí)行的結(jié)果';
}, 3000);

// 異步函數(shù)示例
await Delay.execute(async () => {
    const response = await fetch('https://api.example.com/data');
    return response.json();
}, 1000);

2. 防抖(Debounce)

防抖是指在短時(shí)間內(nèi)多次觸發(fā)同一個(gè)函數(shù),只執(zhí)行最后一次。典型場(chǎng)景包括:

  • 搜索框輸入
  • 窗口調(diào)整
  • 按鈕點(diǎn)擊

實(shí)現(xiàn)原理

每次觸發(fā)時(shí)都會(huì)清除之前的定時(shí)器,重新設(shè)置一個(gè)新的定時(shí)器,確保只有在指定時(shí)間內(nèi)沒(méi)有新的觸發(fā)時(shí)才執(zhí)行函數(shù)。

使用示例

// 創(chuàng)建防抖函數(shù)
const debouncedSearch = Delay.debounce((searchTerm: string) => {
    console.log('搜索:', searchTerm);
}, 500);

// 在輸入框onChange事件中使用
<input onChange={(e) => debouncedSearch(e.target.value)} />

// 窗口調(diào)整示例
const debouncedResize = Delay.debounce(() => {
    console.log('窗口大小改變');
}, 200);

window.addEventListener('resize', debouncedResize);

3. 節(jié)流(Throttle)

節(jié)流是指在一定時(shí)間間隔內(nèi)只執(zhí)行一次函數(shù),無(wú)論這個(gè)函數(shù)被調(diào)用多少次。典型場(chǎng)景包括:

  • 滾動(dòng)事件處理
  • 頻繁點(diǎn)擊
  • 游戲中的射擊

實(shí)現(xiàn)原理

通過(guò)一個(gè)標(biāo)志位控制函數(shù)執(zhí)行,在指定時(shí)間間隔內(nèi),該標(biāo)志位為true時(shí)阻止函數(shù)執(zhí)行,時(shí)間到后將標(biāo)志位設(shè)為false允許下次執(zhí)行。

使用示例

// 創(chuàng)建節(jié)流函數(shù)
const throttledScroll = Delay.throttle(() => {
    console.log('頁(yè)面滾動(dòng)');
}, 200);

// 在滾動(dòng)事件中使用
window.addEventListener('scroll', throttledScroll);

// 游戲射擊示例
const throttledShoot = Delay.throttle(() => {
    console.log('發(fā)射子彈');
}, 1000);

button.addEventListener('click', throttledShoot);

防抖和節(jié)流的區(qū)別

防抖(Debounce):

  • 多次觸發(fā),只執(zhí)行最后一次
  • 適合輸入框?qū)崟r(shí)搜索等場(chǎng)景
  • 重在清除之前的定時(shí)器

節(jié)流(Throttle):

  • 一定時(shí)間內(nèi)只執(zhí)行一次
  • 適合滾動(dòng)事件、頻繁點(diǎn)擊等場(chǎng)景
  • 重在控制執(zhí)行頻率

總結(jié)

這個(gè)Delay工具類(lèi)提供了四個(gè)實(shí)用的方法:

  • sleep: 基礎(chǔ)延遲
  • execute: 延遲執(zhí)行函數(shù)
  • debounce: 創(chuàng)建防抖函數(shù)
  • throttle: 創(chuàng)建節(jié)流函數(shù)

通過(guò)合理使用這些方法,可以有效控制函數(shù)的執(zhí)行時(shí)機(jī),優(yōu)化性能,提升用戶(hù)體驗(yàn)。在實(shí)際開(kāi)發(fā)中,要根據(jù)具體場(chǎng)景選擇合適的方法使用。

到此這篇關(guān)于TypeScript實(shí)用的Delay延遲執(zhí)行工具類(lèi)的文章就介紹到這了,更多相關(guān)TypeScript延遲執(zhí)行內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論