TypeScript Sleep: איך לחכות או להשהות ב-TypeScript

ל-TypeScript אין sleep מובנה. כתבו פונקציה שמחזירה Promise<void> ש-setTimeout מסיים אחרי ההשהיה, ואז עשו לה await בתוך פונקציית async:

const sleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

async function main() {
    console.log("start");
    await sleep(300); // pause this function for 300 ms
    console.log("300 ms later");
}
main();

await sleep(300) משהה רק את main. התוכנית לא קופאת: טיימרים, פונקציות async אחרות ו-I/O ממשיכים לרוץ בזמן ההמתנה.

איך פונקציית sleep עובדת

setTimeout(resolve, ms) מתזמן קריאה ל-resolve אחרי ms מילישניות, והקריאה ל-resolve מסיימת את ה-promise. await על ה-promise הזה משעה את פונקציית ה-async עד אז.

לארגומנט הטיפוס <void> יש חשיבות. new Promise(...) לבדו לא מסיק את הטיפוס שלו מהקריאות ל-resolve, ולכן בלעדיו sleep הייתה מחזירה Promise<unknown>. ו-void הוא מה שמאפשר לקרוא ל-resolve בלי ערך: ב-Promise<number>, resolve() בלי ארגומנט היא שגיאת קומפילציה. כשלפונקציה יש טיפוס החזרה מוצהר, ארגומנט הטיפוס יכול לעבור לשם במקום:

function sleep(ms: number): Promise<void> {
    return new Promise((resolve) => setTimeout(resolve, ms));
}

// A variant that resolves with a value after the delay.
function delay<T>(ms: number, value: T): Promise<T> {
    return new Promise((resolve) => setTimeout(() => resolve(value), ms));
}

async function main() {
    await sleep(100);
    const answer = await delay(100, 42); // answer: number
    console.log(answer + 1); // 43
}
main();

setTimeout מבטיח זמן מינימלי, ולא זמן מדויק: ה-callback רץ כשההשהיה עברה וה-event loop פנוי. צפו לכמה מילישניות של סטייה.

Sleep בתוך לולאה

await sleep() בתוך לולאת for או for...of משהה בין איטרציות, וכך מווסתים עבודה (מגבלות קצב, polling, אנימציות בטרמינל):

const sleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

async function countdown(from: number): Promise<void> {
    for (let i = from; i > 0; i--) {
        console.log(i);
        await sleep(200);
    }
    console.log("liftoff");
}

countdown(3);

זה לא עובד בתוך forEach: הוא מתעלם מה-promise שכל callback אסינכרוני מחזיר, ולכן כל האיטרציות מתחילות בבת אחת ושום דבר לא מחכה. השתמשו בלולאת for או for...of, כמו שמוסבר בדף async/await.

ניסיון חוזר עם השהיה

שימוש אמיתי נפוץ: לנסות פעולה, ואם היא נכשלת, לחכות ולנסות שוב, ולהכפיל את זמן ההמתנה בכל פעם (exponential backoff).

const sleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

async function retry<T>(fn: () => Promise<T>, attempts: number, baseMs: number): Promise<T> {
    for (let i = 1; ; i++) {
        try {
            return await fn();
        } catch (e) {
            if (i >= attempts) throw e;
            const wait = baseMs * 2 ** (i - 1);
            console.log(`attempt ${i} failed, waiting ${wait} ms`);
            await sleep(wait);
        }
    }
}

let calls = 0;
async function flakyRequest(): Promise<string> {
    calls++;
    if (calls < 3) throw new Error("network error");
    return "response body";
}

async function main() {
    const body = await retry(flakyRequest, 5, 50);
    console.log(body); // response body
}
main();

ה-return await fn() בתוך try חשוב: בלי await, promise שנדחה היה מוחזר לפני שה-catch היה יכול לראות אותו.

Sleep שאפשר לבטל

sleep רגיל אי אפשר לקטוע. כדי להפסיק לחכות מוקדם (משתמש לחץ על ביטול, התחיל כיבוי), העבירו AbortSignal ונקו את הטיימר כשהוא מופעל:

function sleep(ms: number, signal?: AbortSignal): Promise<void> {
    return new Promise((resolve, reject) => {
        if (signal?.aborted) return reject(new Error("aborted"));
        const timer = setTimeout(resolve, ms);
        signal?.addEventListener("abort", () => {
            clearTimeout(timer);
            reject(new Error("aborted"));
        }, { once: true });
    });
}

async function main() {
    const controller = new AbortController();
    setTimeout(() => controller.abort(), 50); // cancel after 50 ms

    try {
        await sleep(5000, controller.signal);
        console.log("slept the full 5 s");
    } catch (e) {
        if (e instanceof Error) console.log("woke early:", e.message); // woke early: aborted
    }
}
main();

התוכנית יוצאת מיד אחרי הביטול כי הטיימר הארוך נוקה. בלי clearTimeout, Node היה ממשיך לרוץ עד שחמש השניות היו עוברות.

טיימרי ה-promise המובנים של Node

Node כולל גרסת promise של setTimeout במודול node:timers/promises, כך שבקוד Node אפשר לייבא אותה במקום לכתוב את פונקציית העזר. היא מקבלת גם ערך לסיים איתו ו-AbortSignal:

import { setTimeout as sleep } from "node:timers/promises";

async function main() {
    await sleep(1000);                              // wait one second
    const result = await sleep(500, "done");        // resolves with "done"
    const ac = new AbortController();
    await sleep(10_000, undefined, { signal: ac.signal }); // cancellable
}

הטיפוסים מגיעים מ-@types/node (npm i -D @types/node). המודול הזה לא קיים בדפדפנים, ושם פונקציית העזר של שורה אחת היא הבחירה הניידת.

אין sleep חוסם

בשפות עם threads יש sleep שחוסם את ה-thread הנוכחי. JavaScript מריצה את הקוד שלכם על thread יחיד עם event loop, ולכן sleep חוסם היה מקפיא את כל השאר: שום טיימר לא מופעל, שום תגובת רשת לא מטופלת, ובדפדפן הדף מפסיק להגיב. לולאה עסוקה שמסתובבת עד שהשעון עובר זמן מסוים עושה בדיוק את זה, והיא אף פעם לא הכלי הנכון.

ה-sleep האסינכרוני הוא הדרך שבה המתנה עובדת ב-JavaScript וב-TypeScript: הפונקציה מושעית, ה-thread פנוי, והפונקציה ממשיכה כשהטיימר מופעל. Atomics.wait באמת יכול לחסום, אבל רק על SharedArrayBuffer, ודפדפנים אוסרים אותו ב-main thread; הוא קיים לתיאום worker threads, ולא להשהיות.