Sen maszynopisu

Tworzę stronę internetową w Angular 2 przy użyciu Typescript i zastanawiałem się, czy istnieje sposób na zaimplementowanie thread.sleep(ms)funkcjonalności.

Moim przypadkiem jest przekierowanie użytkowników po przesłaniu formularza po kilku sekundach, co jest bardzo łatwe w html lub javascript, ale nie jestem pewien, jak to zrobić w Typescript.

Wielkie dzięki,

Musisz poczekać na TypeScript 2.0 z obsługą async/ awaitdla ES5, ponieważ jest teraz obsługiwany tylko dla kompilacji TS do ES6.

Byłbyś w stanie stworzyć funkcję opóźnienia z async:

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

I nazwij to

await delay(300);

Należy pamiętać, że można używać awaittylko asyncfunkcji wewnętrznej .

Jeśli nie możesz ( powiedzmy, że budujesz aplikację nodejs ), po prostu umieść swój kod w asyncfunkcji anonimowej . Oto przykład:

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

        await delay(1000);

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

Przykładowa aplikacja TS: https://github.com/v-andrew/ts-template

W STARYM JS musisz używać

setTimeout(YourFunctionName, Milliseconds);

lub

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

Jednak każda większa przeglądarka obsługuje async/ awaitjest mniej przydatna.

Aktualizacja: TypeScript 2.1 jest tutaj z async/await.

Po prostu nie zapominaj, że potrzebujesz Promiseimplementacji podczas kompilacji do ES5, gdzie Promise nie jest natywnie dostępna.

PS

Musisz wyeksportować funkcję, jeśli chcesz jej używać poza oryginalnym plikiem.

To działa: (dzięki komentarzom)

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

Z jakiegoś powodu powyższa zaakceptowana odpowiedź nie działa w nowych wersjach Angular (V6).

do tego użyj tego ...

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

powyżej pracował dla mnie.

Stosowanie:

this.delay(3000);

LUB dokładniejszy sposób

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

Z RxJS:

import { timer } from 'rxjs';

// ...

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

x wynosi 0.

Jeśli podasz drugi argument perioddo timer, nowa liczba będzie emitowana co periodmilisekundę (x = 0, a następnie x = 1, x = 2, ...).

Więcej informacji można znaleźć w oficjalnym dokumencie .

import { timer } from 'rxjs';

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

to działa lepiej dla mnie

Lub zamiast deklarować funkcję, po prostu:

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

Jeśli używasz angular5 i nowszych wersji, dołącz poniższą metodę do swojego pliku ts.

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

następnie wywołaj tę metodę delay () w dowolnym miejscu.

na przykład:

validateInputValues() {
    if (null == this.id|| this.id== "") {
        this.messageService.add(
            {severity: 'error', summary: 'ID is Required.'});
        this.delay(3000).then(any => {
            this.messageService.clear();
        });
    }
}

To zniknie warkot wiadomości po 3 sekundach.