Ich entwickle in Angular 2 eine Website mit TypeScript, und ich habe mich gefragt, ob es eine Möglichkeit gibt, thread.sleep(ms)
-Funktionalität zu implementieren.
Mein Anwendungsfall besteht darin, die Benutzer nach dem Senden eines Formulars nach ein paar Sekunden umzuleiten, was sehr einfach in HTML oder Javascript ist, aber ich bin nicht sicher, wie es in TypeScript gemacht wird.
Danke vielmals,
Sie müssen auf TypeScript 2.0 mit async
await
warten, um ES5 zu unterstützen, da es jetzt nur für die TS-zu-ES6-Kompilierung unterstützt wird.
Sie könnten eine Verzögerungsfunktion mit async
erstellen:
async function delay(ms: number) {
return new Promise( resolve => setTimeout(resolve, ms) );
}
Und nenne es
await delay(300);
Bitte beachten Sie, dass Sie await
nur innerhalb der async
-Funktion verwenden können.
Wenn Sie dies nicht tun können (_/nehmen wir an, Sie erstellen nodejs application), fügen Sie Ihren Code einfach in die anonyme async
-Funktion ein. Hier ist ein Beispiel:
(async () => {
// Do something before delay
console.log('before delay')
await delay(1000);
// Do something after
console.log('after delay')
})();
In JS musst du verwenden
setTimeout(YourFunctionName, Milliseconds);
oder
setTimeout( () => { /*Your Code*/ }, Milliseconds );
Aktualisieren: TypeScript 2.1 ist hier mit
async/await
.
Vergessen Sie nicht, dass Sie eine Promise
-Implementierung benötigen, wenn Sie auf ES5 kompilieren, wo Promise nicht nativ verfügbar ist.
Das funktioniert: (danke der Kommentare)
setTimeout(() =>
{
this.router.navigate(['/']);
},
5000);
Aus irgendeinem Grund funktioniert die oben genannte akzeptierte Antwort nicht in Neue Versionen von Angular (V6).
dafür verwenden Sie diese ..
async delay(ms: number) {
await new Promise(resolve => setTimeout(()=>resolve(), ms)).then(()=>console.log("fired"));
}
oben arbeitete für mich.
Verwendungszweck:
this.delay(3000);
ODER genauer Weg
this.delay(3000).then(any=>{
//your task after delay.
});
Mit 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
Und Sie müssen RxJS-Anweisungen ordnungsgemäß einschließen. In Angular zum Beispiel benötigen Sie:
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';
Oder anstatt eine Funktion zu deklarieren, einfach:
setTimeout(() => { console.log('hello'); }, 1000);
Wenn Sie angle5 oder höher verwenden, fügen Sie bitte die unten stehende Methode in Ihre TS-Datei ein.
async delay(ms: number) {
await new Promise(resolve => setTimeout(()=>resolve(), ms)).then(()=>console.log("fired"));
}
rufen Sie dann die delay () -Methode auf, wo immer Sie möchten.
z.B:
validateInputValues() {
if (null == this.id|| this.id== "") {
this.messageService.add(
{severity: 'error', summary: 'ID is Required.'});
this.delay(3000).then(any => {
this.messageService.clear();
});
}
}
Diese Meldung verschwindet nach 3 Sekunden.