Sleep di TypeScript: Cara Menunggu atau Menunda Eksekusi

TypeScript tidak punya sleep bawaan. Tulis fungsi yang mengembalikan Promise<void> yang di-resolve oleh setTimeout setelah jeda tertentu, lalu lakukan await padanya di dalam fungsi 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) hanya menghentikan main. Programnya tidak membeku: timer, fungsi async lain, dan I/O tetap berjalan selama menunggu.

Cara Kerja Fungsi sleep

setTimeout(resolve, ms) menjadwalkan resolve untuk dipanggil setelah ms milidetik, dan memanggil resolve membuat promise itu selesai. await pada promise itu menangguhkan fungsi async sampai saat itu.

Argumen tipe <void> itu penting. new Promise(...) yang berdiri sendiri tidak menyimpulkan tipenya dari pemanggilan resolve, jadi tanpa argumen tipe itu sleep akan mengembalikan Promise<unknown>. Lalu void itulah yang mengizinkan resolve dipanggil tanpa nilai: di Promise<number>, resolve() tanpa argumen adalah error kompilasi. Kalau fungsinya punya tipe kembalian yang dideklarasikan, argumen tipe itu bisa ditaruh di sana:

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 menjamin waktu minimum, bukan waktu yang tepat: callback-nya berjalan setelah jedanya lewat dan event loop sedang kosong. Perkirakan ada selisih beberapa milidetik.

Sleep di Dalam Perulangan

await sleep() di dalam loop for atau for...of memberi jeda di antara setiap iterasi, dan begitulah cara mengatur kecepatan kerja (batas rate, polling, animasi di terminal):

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

Cara ini tidak berhasil di dalam forEach: ia mengabaikan promise yang dikembalikan setiap callback async, jadi semua iterasi dimulai sekaligus dan tidak ada yang menunggu. Pakai loop for atau for...of, seperti yang dijelaskan di halaman async/await.

Mencoba Ulang dengan Jeda

Pemakaian nyata yang umum: coba sebuah operasi, dan kalau gagal, tunggu lalu coba lagi, dengan waktu tunggu dua kali lipat setiap kali (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() di dalam try itu penting: tanpa await, promise yang reject akan dikembalikan sebelum catch sempat melihatnya.

sleep yang Bisa Dibatalkan

sleep biasa tidak bisa diinterupsi. Untuk berhenti menunggu lebih awal (pengguna menekan Batal, proses shutdown dimulai), kirim sebuah AbortSignal dan hapus timer-nya saat signal itu aktif:

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

Program langsung berhenti setelah abort karena timer yang panjang sudah dihapus. Tanpa clearTimeout, Node akan terus berjalan sampai 5 detik itu habis.

Timer Promise Bawaan Node

Node menyertakan versi promise dari setTimeout di module node:timers/promises, jadi di kode Node kamu bisa meng-import-nya alih-alih menulis helper sendiri. Fungsi itu juga menerima nilai untuk resolve dan sebuah 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
}

Tipenya berasal dari @types/node (npm i -D @types/node). Module ini tidak ada di browser, dan di sana helper satu baris tadi adalah pilihan yang portabel.

Tidak Ada sleep yang Memblokir

Bahasa yang punya thread memiliki sleep yang memblokir thread saat ini. JavaScript menjalankan kodemu di satu thread dengan event loop, jadi sleep yang memblokir akan membekukan semua hal lain: tidak ada timer yang berjalan, tidak ada response jaringan yang ditangani, dan di browser halamannya berhenti merespons. Perulangan sibuk yang terus berputar sampai jam melewati waktu tertentu melakukan persis hal itu, dan tidak pernah menjadi alat yang tepat.

sleep yang async adalah cara menunggu di JavaScript dan TypeScript: fungsinya ditangguhkan, thread-nya bebas, dan fungsi itu dilanjutkan saat timer selesai. Atomics.wait benar-benar bisa memblokir, tetapi hanya pada SharedArrayBuffer, dan browser melarangnya di main thread; fungsi itu ada untuk mengoordinasikan worker thread, bukan untuk jeda.