Comment stocker les fonctions JavaScript dans une file d'attente et les exécuter séquentiellement ?-js tutoriel-php.cn

Comment stocker les fonctions JavaScript dans une file d'attente et les exécuter séquentiellement ?

王林

Libérer： 2023-08-24 18:05:02

avant

669 Les gens l'ont consulté

Comment stocker les fonctions JavaScript dans une file dattente et les exécuter séquentiellement ?

Parfois, les développeurs peuvent avoir besoin de stocker une fonction dans une file d'attente et de l'exécuter dans l'ordre dans lequel elle est stockée dans la file d'attente. En JavaScript, nous pouvons utiliser des tableaux pour créer une file d'attente. Nous pouvons utiliser la méthode push() du tableau pour mettre la fonction en file d'attente et utiliser la méthode shift() pour retirer la fonction de la file d'attente.

Ci-dessous, nous verrons des exemples de stockage de fonctions JavaScript dans la file d'attente et de leur exécution dans l'ordre de la file d'attente.

Syntaxe

Les utilisateurs peuvent stocker les fonctions JavaScript dans la file d'attente selon la syntaxe suivante et les exécuter dans l'ordre.

while (queue.length > 0) { 
   queue[0](); 
   queue.shift(); 
}

Copier après la connexion

Nous utilisons la boucle while dans la syntaxe ci-dessus pour parcourir la file d'attente. Nous exécutons la première fonction de la file d'attente, puis supprimons cette fonction de la file d'attente.

Exemple

Dans l'exemple ci-dessous, nous créons une variable appelée file d'attente et l'initialisons avec un tableau vide pour en faire une file d'attente.

Après cela, nous avons créé trois fonctions différentes et utilisé la méthode push() du tableau pour ajouter toutes les fonctions dans la file d'attente. Chaque fois que les utilisateurs appuient sur le bouton, il appelle la fonctionexecuteFunctions(), que nous utilisons. la boucle while pour retirer la fonction de la file d'attente. À chaque itération de la boucle, nous exécutons la première fonction du tableau et utilisons la méthode array.shift() pour supprimer le premier élément du tableau.

<html>
<body>
   <h3>Using the array to add functions in Queue and execute functions in particular order</h3>
   <div id = "content"> </div></br>
   <button onclick = "executeFunctions()"> Execute function in queue order </button>
   <script>
      let content = document.getElementById("content");
      // execute the functions in the order they are added to the queue
      var queue = [];
      function executeFunctions() {
         while (queue.length > 0) {
            queue[0]();
            queue.shift();
         }
      }
      function function1() {
         content.innerHTML += "Function 1 executed <br>";
      }
      function function2() {
         content.innerHTML += "Function 2 executed <br>";
      }
      function function3() {
         content.innerHTML += "Function 3 executed <br>";
      }
      queue.push(function1);
      queue.push(function2);
      queue.push(function3);
   </script>
</body>
</html>

Copier après la connexion

Exemple

Dans l'exemple ci-dessous, nous créons un tableau à utiliser comme file d'attente, tout comme le premier exemple. Après cela, nous ajoutons les fonctions sum(), sub(), mul() et div() à la file d'attente.

Dans la fonctionexecuteFunctions(), nous utilisons une boucle for pour appeler toutes les fonctions dans l'ordre de la file d'attente. De plus, nous avons également utilisé la méthode call() pour appeler une fonction depuis la file d’attente.

<html>
<body>
   <h3>Using the array to add functions in Queue and execute functions in particular order</h3>
   <div id = "content"> </div> </br>
   <button onclick = "executeFunctions()"> Execute function in queue order </button>
   <script>
      let content = document.getElementById("content");
      // execute the functions in the order they are added to the queue
      var queue = [];
      function executeFunctions() {
         for (let i = 0; i < queue.length; i++) {
            queue[i].call();
         }
      }
      let a = 10;
      let b = 5;
      function sum() {
      content.innerHTML += "Sum of " + a + " and " + b + " is " + (a + b);
      }
      function sub() {
         content.innerHTML += "<br>Subtraction of " + a + " and " + b + " is " + (a - b);
      }
      function mul() {
         content.innerHTML += "<br>Multiplication of " + a + " and " + b + " is " + (a * b);
      }
      function div() {
         content.innerHTML += "<br>Division of " + a + " and " + b + " is " + (a / b);
      }
      queue.push(sum);
      queue.push(sub);
      queue.push(mul);
      queue.push(div);
   </script>
</body>
</html>

Copier après la connexion

Les utilisateurs ont appris à stocker des fonctions dans une file d'attente et à les exécuter dans l'ordre de la file d'attente. En JavaScript, il n'y a pas de structure de données de file d'attente intégrée, mais nous pouvons utiliser des tableaux comme files d'attente.

Dans le premier exemple, nous avons utilisé la méthode shift() pour supprimer la file d'attente. Dans le deuxième exemple, nous avons utilisé la boucle for pour exécuter les fonctions dans l'ordre.

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!