Maison > Article > interface Web > Comment stocker les fonctions JavaScript dans une file d’attente et les exécuter séquentiellement ?

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

王林avant: 2023-08-24 18:05:02640parcourir

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(); 
}

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>

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>

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!

JavaScript Array for while 循环数据结构 function

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Qu'est-ce que le composant ScrollView et comment l'utiliser dans React Native ?Article suivant：Qu'est-ce que le composant ScrollView et comment l'utiliser dans React Native ?

Articles Liés

Voir plus