Comment attendre 5 secondes avant d'exécuter la ligne suivante en JavaScript ?

Attendez 5 secondes avant d'exécuter la ligne suivante

En JavaScript, la fonction setTimeout() planifie l'exécution d'une fonction après un nombre spécifié de millisecondes. Cependant, cela n'arrête pas l'exécution du code, ce qui signifie que la ligne de code suivante sera exécutée immédiatement après l'appel setTimeout(), quel que soit le délai spécifié.

Votre code

Votre code vise à attendre 5 secondes avant de vérifier si newState est égal à -1. Cependant, comme setTimeout() ne bloque pas le code, la vérification a lieu immédiatement, avant que le délai de 5 secondes ne se produise.

Solution

Pour obtenir le comportement souhaité, vous devez utiliser un mécanisme qui peut suspendre l'exécution de votre code pendant 5 secondes. Il existe deux approches modernes que vous pouvez envisager :

1. Syntaxe Async/Await (navigateur uniquement)

ES6 a introduit la syntaxe async/wait, qui vous permet d'écrire du code asynchrone dans un style plus synchrone. En marquant votre fonction comme asynchrone, vous pouvez utiliser le mot-clé wait pour suspendre l'exécution jusqu'à ce qu'une promesse soit résolue.

<code class="javascript">const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

const stateChange = async newState => {
  await delay(5000);

  if (newState === -1) {
    alert('VIDEO HAS STOPPED');
  }
};</code>

2. Module Timers/Promises (Node.js uniquement)

Dans Node.js 16, le module timers/promises fournit une version basée sur les promesses de setTimeout. Cela vous permet de suspendre l'exécution et d'attendre la fin du délai avant de continuer.

<code class="javascript">import { setTimeout } from "timers/promises";

const stateChange = async newState => {
  await setTimeout(5000);

  if (newState === -1) {
    console.log('VIDEO HAS STOPPED');
  }
};</code>

Ces deux approches garantiront que l'exécution du code est interrompue pendant 5 secondes avant que la vérification newState ne soit effectuée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!