Question rapide, comment mettre en veille angulaire pendant 5 secondes avant de naviguer vers une nouvelle page?
J'essaye ceci dans ma fonction mais cela ne semble pas fonctionner:
setTimeout(() => {
console.log('sleep');
}, 5000);
this.router.navigate(['/question', this.getQuestionID() + 1]);
...
4 Réponses :
Vous pouvez essayer ceci:
setTimeout(() => {
this.router.navigate(['/question', this.getQuestionID() + 1]);
}, 5000);
Veuillez ne pas publier uniquement le code comme réponse, mais inclure une explication de ce que fait votre code et de la manière dont il résout le problème de la question. Les réponses avec une explication sont généralement de meilleure qualité et sont plus susceptibles d'attirer des votes positifs.
Merci pour votre retour. Je garderai cela à l'esprit!
Cela se produit parce que setTimeout ne bloque pas l'exécution de code, mais planifie l'exécution d'une fonction de rappel. Cela dit, votre appel de navigation est en dehors du rappel. Cela signifie qu'il fonctionnera juste après la planification du rappel, pas lors de son exécution.
Le bon code est:
setTimeout(() => {
console.log('sleep');
this.router.navigate(['/question', this.getQuestionID() + 1]);
// And any other code that should run only after 5s
}, 5000);
Remarque:
Si l'utilisateur essaie de s'éloigner en utilisant un lien de routeur angulaire avant tge 5s, il exécutera toujours la navigation après 5s, provoquant un comportement étrange.
Vous ne devriez ni:
Que faire si l'utilisateur s'éloigne avant que ces 5 ne soient passés?
Le code qui est écrit dans setTimeout (() => {}, 5000) dort pendant 5 secondes alors essayez d'utiliser
setTimeout(() => {
console.log('sleep');
this.router.navigate(['/question', this.getQuestionID() + 1]);
}, 5000);
Si vous voulez l'écrire de la meilleure façon, vous devez utiliser l'opérateur RXJS timer ( documentation )
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
n'oubliez pas non plus de vous désinscrire dans le hook de cycle de vie ngOnDestroy ( documentation )
const subscription = timer(5000).subscribe(() => {
this.router.navigate(['/question', this.getQuestionID() + 1]);
)};
il suffit de mettre la ligne de navigation dans la fonction setTimeout
Essayez de placer la ligne de navigation à l'intérieur de la fonction de rappel du délai d'expiration.
J'ai essayé ceci et les réponses ci-dessous, mais il ne semble pas dormir pendant 5 secondes avant de naviguer ...