Heim > Artikel > Web-Frontend > Wie speichere ich JavaScript-Funktionen in einer Warteschlange und führe sie nacheinander aus?

Wie speichere ich JavaScript-Funktionen in einer Warteschlange und führe sie nacheinander aus?

王林nach vorne: 2023-08-24 18:05:02684Durchsuche

Manchmal müssen Entwickler möglicherweise eine Funktion in einer Warteschlange speichern und sie in der Reihenfolge ausführen, in der sie in der Warteschlange gespeichert ist. In JavaScript können wir Arrays verwenden, um eine Warteschlange zu erstellen. Wir können die Push()-Methode des Arrays verwenden, um die Funktion in die Warteschlange zu stellen, und die Shift()-Methode verwenden, um die Funktion aus der Warteschlange zu entfernen.

Unten sehen wir Beispiele für das Speichern von JavaScript-Funktionen in der Warteschlange und deren Ausführung in der Warteschlangenreihenfolge.

Syntax

Benutzer können JavaScript-Funktionen gemäß der folgenden Syntax in der Warteschlange speichern und sie nacheinander ausführen.

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

Wir verwenden die while-Schleife in der obigen Syntax, um die Warteschlange zu durchlaufen. Wir führen die erste Funktion in der Warteschlange aus und entfernen diese Funktion dann aus der Warteschlange.

Beispiel

Im folgenden Beispiel erstellen wir eine Variable namens queue und initialisieren sie mit einem leeren Array, um daraus eine Warteschlange zu machen.

Danach haben wir drei verschiedene Funktionen erstellt und die push()-Methode des Arrays verwendet, um alle Funktionen in die Warteschlange einzufügen. Immer wenn Benutzer die Taste drücken, wird die Funktion „executeFunctions()“ aufgerufen die while-Schleife, um die Funktion aus der Warteschlange zu entfernen. In jeder Iteration der Schleife führen wir die erste Funktion aus dem Array aus und verwenden die Methode array.shift(), um das erste Element aus dem Array zu entfernen.

<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>

Beispiel

Im folgenden Beispiel erstellen wir ein Array zur Verwendung als Warteschlange, genau wie im ersten Beispiel. Danach fügen wir der Warteschlange die Funktionen sum(), sub(), mul() und div() hinzu.

In der FunktionexecuteFunctions() verwenden wir eine for-Schleife, um alle Funktionen in der Reihenfolge der Warteschlange aufzurufen. Darüber hinaus haben wir auch die Methode call() verwendet, um eine Funktion aus der Warteschlange aufzurufen.

<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>

Benutzer haben gelernt, Funktionen in einer Warteschlange zu speichern und sie in der Reihenfolge der Warteschlange auszuführen. In JavaScript gibt es keine integrierte Warteschlangendatenstruktur, wir können jedoch Arrays als Warteschlangen verwenden.

Im ersten Beispiel haben wir die Methode „shift()“ verwendet, um die Warteschlange zu entfernen. Im zweiten Beispiel haben wir die for-Schleife verwendet, um die Funktionen der Reihe nach auszuführen.

Das obige ist der detaillierte Inhalt vonWie speichere ich JavaScript-Funktionen in einer Warteschlange und führe sie nacheinander aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript Array for while 循环数据结构 function

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Was ist die ScrollView-Komponente und wie wird sie in React Native verwendet?Nächster Artikel：Was ist die ScrollView-Komponente und wie wird sie in React Native verwendet?

In Verbindung stehende Artikel

Mehr sehen