Comment implémenter la fonction sleep en TypeScript ?

Question

Je développe un site web dans Angular 2 en utilisant TypeScript et je me demandais s'il y avait un moyen d'implémenter thread.sleep(ms) fonctionnalité.

Mon cas d'utilisation est de rediriger les utilisateurs après avoir soumis un formulaire après quelques secondes, ce qui est très facile en JavaScript mais je ne suis pas sûr de savoir comment le faire en TypeScript.

Answer 1

Il faut attendre TypeScript 2.0 avec async / await pour la prise en charge d'ES5, car elle n'est désormais prise en charge que pour la compilation de TS à ES6.

Vous pouvez créer une fonction de retardement avec async :

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

Et l'appeler

await delay(1000);

BTW, vous pouvez attendre sur Promise directement :

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

Veuillez noter que vous pouvez utiliser await uniquement à l'intérieur async fonction.

Si vous ne pouvez pas ( Imaginons que vous construisiez une application nodejs ), il suffit de placer votre code dans le fichier anonyme async fonction. Voici un exemple :

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

        await delay(1000);

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

Exemple d'application TS : https://github.com/v-andrew/ts-template

Dans OLD JS, vous devez utiliser

setTimeout(YourFunctionName, Milliseconds);

ou

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

Toutefois, comme tous les principaux navigateurs prennent en charge les async / await il est moins utile.

Mise à jour : TypeScript 2.1 est disponible avec async/await .

N'oubliez pas que vous avez besoin Promise lorsque vous compilez en ES5, où Promise n'est pas disponible nativement.

PS

Vous devez exporter la fonction si vous souhaitez l'utiliser en dehors du fichier original.

Answer 2

Cela fonctionne : (merci aux commentaires)

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

Answer 3

Pour une raison quelconque, la réponse acceptée ci-dessus ne fonctionne pas dans les nouvelles versions d'Angular (V6).

pour l'utilisation de ce

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

ci-dessus a fonctionné pour moi.

Utilisation :

this.delay(3000);

OU de manière plus précise

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

Answer 4

Con RxJS :

import { timer } from 'rxjs';

// ...

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

x est de 0.

Si vous donnez un deuxième argument period a timer un nouveau numéro sera émis chaque period millisecondes (x = 0 puis x = 1, x = 2, ...).

Voir le document officiel pour plus de détails.

Answer 5

Si vous utilisez angular5 et plus, veuillez inclure la méthode ci-dessous dans votre fichier ts.

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

puis appelez cette méthode delay() où vous voulez.

par exemple

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

Le message disparaît après 3 secondes.