Question rapide, comment puis-je mettre Angular en veille 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]);
...
1
integral100x 7 nov. 2019 à 02:20

4 réponses

Meilleure réponse

Cela se produit car setTimeout ne bloque pas l'exécution de code, mais planifie plutôt l'exécution d'une fonction de rappel. Cela dit, votre appel de navigation est en dehors du rappel. Cela signifie qu'il s'exécutera juste après la planification du rappel, et non 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 les 5 secondes, il exécutera toujours la navigation après 5 secondes, provoquant un comportement étrange.

Vous ne devez pas non plus:

  1. Annuler le délai d'attente sur le changement d'itinéraire; ou
  2. Bloquer toute la page pour éviter de cliquer sur un autre itinéraire.
3
Elias Soares 7 nov. 2019 à 08:08

Vous pouvez essayer ceci:

setTimeout(() => {
    this.router.navigate(['/question', this.getQuestionID() + 1]);
}, 5000);
-1
Dino 7 nov. 2019 à 07:51

Le code qui est écrit dans le setTimeout(()=>{},5000) est en veille pendant 5 secondes, essayez donc d'utiliser

setTimeout(() => {
    console.log('sleep');
    this.router.navigate(['/question', this.getQuestionID() + 1]);
  }, 5000);
0
AyushKatiyar 7 nov. 2019 à 06:39

Si vous souhaitez l'écrire de la meilleure façon, vous devez utiliser l'opérateur RXJS timer (documentation)

const subscription = timer(5000).subscribe(() => {
    this.router.navigate(['/question', this.getQuestionID() + 1]);
)};

N'oubliez pas non plus de vous désinscrire dans le ngOnDestroy hook du cycle de vie (documentation)

ngOnDestroy() {
   if (this.subscription) {
       this.subscription.unsubscribe();
   }
}
0
Roman Šimík 7 nov. 2019 à 07:10