web-dev-qa-db-fra.com

Sommeil tapé

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

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

Merci beaucoup,

angulartypescript
60
kha

Vous devez attendre TypeScript 2.0 avec asyncawait pour la prise en charge de ES5, car il est désormais pris en charge uniquement pour la compilation TS à ES6. 

Vous pourrez créer une fonction de délai avec async:

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

Et appelle ça

await delay(300);

Veuillez noter que vous pouvez utiliser await uniquement dans la fonction async.  

Si vous ne pouvez pas (_/supposons que vous construisez une application nodejs), placez simplement votre code dans la fonction anonyme async. Voici un exemple:

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

    await delay(1000);

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

En JS, vous devez utiliser 

setTimeout(YourFunctionName, Milliseconds);

ou 

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

Mettre à jour: TypeScript 2.1 est ici avec async/await. 

N'oubliez surtout pas que vous avez besoin de la mise en œuvre Promise lorsque vous compilez vers ES5, où Promise n'est pas disponible de manière native.

86
v-andrew

Cela fonctionne: (merci aux commentaires)

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

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

pour cela utiliser ceci ..

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

ci-dessus a fonctionné pour moi.

Usage:

this.delay(3000);

OU de manière plus précise

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

Avec RxJS:

const delay_observable = of('').pipe(delay( * your delay in ms * ));
delay_observable.subscribe(s => { *your action here* });
// Rest of the code continues to execute, your action will be done when time comes

Et vous devez inclure correctement les directives RxJS. En angulaire par exemple, vous aurez besoin de:

import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';
0
Mic

Ou plutôt que de déclarer une fonction, simplement:

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

0
Gebus

Si vous utilisez angular5 et supérieur, 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"));
}

appelez ensuite 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();
        });
    }
}

Ce message disparaîtra après 3 secondes.

0
Jag