angular - Bagaimana cara mengimplementasikan fungsi sleep di TypeScript?

Saya sedang mengembangkan sebuah situs web di Angular 2 menggunakan TypeScript dan saya bertanya-tanya apakah ada cara untuk menerapkan fungsi thread.sleep(ms).

Kasus penggunaan saya adalah untuk mengarahkan pengguna setelah mengirimkan formulir beberapa detik kemudian, yang sangat mudah dilakukan di JavaScript tetapi saya tidak yakin bagaimana melakukannya di TypeScript.

Jawaban #1

Anda harus menunggu TypeScript 2.0 dengan async/await untuk dukungan ES5 karena sekarang hanya didukung untuk kompilasi TS ke ES6.

Anda akan dapat membuat fungsi penundaan dengan async:

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

Dan sebut itu

await delay(1000);

Ngomong-ngomong, kamu bisa menunggu Promise secara langsung:

await new Promise(f => setTimeout(f, 1000));

Harap diperhatikan, bahwa Anda hanya dapat menggunakan await di dalam fungsi async.

Jika Anda tidak bisa (katakanlah Anda sedang membangun aplikasi nodejs), cukup letakkan kode Anda di dalam fungsi async anonim. Berikut contohnya:

    (async () => { 
        // Do something before delay
        console.log('before delay')

        await delay(1000);

        // Do something after
        console.log('after delay')
    })();

Contoh Aplikasi TS: https://github.com/v-andrew/ts-template

Dalam JS LAMA Anda harus menggunakan

setTimeout(YourFunctionName, Milliseconds);

atau

setTimeout( () => { /*Your Code*/ }, Milliseconds );

Namun dengan setiap browser utama yang mendukung async/await, ini menjadi kurang berguna.

Pembaruan: TypeScript 2.1 hadir dengan async/await.

Jangan lupa bahwa Anda memerlukan implementasi Promise saat mengompilasi ke ES5, di mana Promise tidak tersedia secara asli.

PS

Anda harus mengekspor fungsi tersebut jika ingin menggunakannya di luar file asli.

Jawaban #2

Ini berhasil: (terima kasih atas komentarnya)

setTimeout(() => 
{
    this.router.navigate(['/']);
},
5000);

Jawaban #3

Entah kenapa jawaban yang diterima di atas tidak berfungsi di versi Angular baru (V6).

untuk itu gunakan ini..

async delay(ms: number) {
    await new Promise(resolve => setTimeout(()=>resolve(), ms)).then(()=>console.log("fired"));
}

yang di atas berhasil untuk saya.

Penggunaan :

this.delay(3000);

ATAU cara yang lebih akurat

this.delay(3000).then(any=>{
     //your task after delay.
});

Jawaban #4

Dengan RxJS:

import { timer } from 'rxjs';

// ...

timer(your_delay_in_ms).subscribe(x => { your_action_code_here })

x adalah 0.

Jika Anda memberikan argumen kedua period ke timer, sebuah angka baru akan dipancarkan setiap period milidetik (x=0 lalu x=1, x=2, ...).

Lihat dokumen resmi untuk detail lebih lanjut.

Jawaban #5

Atau daripada mendeklarasikan sebuah fungsi, cukup:

setTimeout(() => {
    console.log('hello');
}, 1000);

Jawaban #6

import { timer } from 'rxjs';
import { take } from 'rxjs/operators';

await timer(1000).pipe(take(1)).toPromise();

ini lebih cocok untuk saya

Jawaban #7

Cara yang benar untuk melakukannya dari ES6 adalah

import { setTimeout } from 'timers/promises';

await setTimeout(5000);

Ini adalah metode node asli sekarang. https://nodejs.org/api/timers.html

Artikel terkait