Comment implémenter une fonction d'attente en JavaScript pour les tâches asynchrones ?

Délais de synchronisation en JavaScript

Comprendre les délais de synchronisation en JavaScript est crucial pour créer des applications Web réactives et efficaces. Dans cet article, nous aborderons le problème de l'attente d'une heure précise avant d'exécuter une ligne de code.

Le problème :

Un développeur JavaScript novice a rencontré un problème où une fonction n'attend pas comme prévu avant d'évaluer une condition. Le comportement attendu est d'attendre 5 secondes avant de vérifier si un certain état a changé. Cependant, la fonction actuelle vérifie immédiatement au lieu d'attendre.

La solution :

Pour obtenir ce comportement souhaité, nous pouvons utiliser les approches suivantes :

Navigateur :

En utilisant la syntaxe async/await moderne (disponible dans les navigateurs prenant en charge ECMAScript 6 et supérieur), nous pouvons utiliser la solution suivante :

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

async function yourFunction() {
  await delay(5000);
  console.log("Waited 5s");

  await delay(5000);
  console.log("Waited an additional 5s");
}</code>

Cette approche simplifie le code en le faisant apparaître synchrone, malgré une exécution asynchrone.

Node.js :

Pour Node.js version 16 et supérieure, nous pouvons exploiter le Fonction setTimeout intégrée basée sur la promesse :

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

async function yourFunction() {
  await setTimeout(5000);
  console.log("Waited 5s");

  await setTimeout(5000);
  console.log("Waited an additional 5s");
}</code>

Attention :

Il est important de noter que l'utilisation d'une fonction de retard pour éviter les conditions de concurrence (en particulier lors des tests asynchrones code) doit être fait avec prudence, car cela peut souvent conduire à des solutions sous-optimales.

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!