Heim > Web-Frontend > js-Tutorial > Hauptteil

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

王林
Freigeben: 2023-08-24 18:05:02
nach vorne
656 Leute haben es durchsucht

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

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(); 
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!