How to store JavaScript functions in a queue and execute them sequentially?-JS Tutorial-php.cn

How to store JavaScript functions in a queue and execute them sequentially?

王林

Release： 2023-08-24 18:05:02

forward

655 people have browsed it

How to store JavaScript functions in a queue and execute them sequentially?

Sometimes, a developer may need to store a function in a queue and execute it in the order it is stored in the queue. In JavaScript, we can use arrays to create a queue. We can use the push() method of the array to queue the function, and use the shift() method to dequeue the function from the queue.

Below, we will see examples of storing JavaScript functions in the queue and executing them in the queue order.

Syntax

Users can store JavaScript functions in the queue according to the following syntax and execute them in sequence.

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

Copy after login

We use the while loop in the above syntax to traverse the queue. We execute the first function in the queue and then remove that function from the queue.

Example

In the following example, we create a variable named queue and initialize it with an empty array to make it a queue.

After that, we created three different functions and used the push() method of the array to add all functions into the queue. Whenever users press the button, it calls the executeFunctions() function. In the executeFunctions() function, we use the while loop to deque the function from the queue. In every iteration of the loop, we execute the first function from the array and use the array.shift() method to remove the first element from the array.

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

Copy after login

Example

In the following example, we create an array to use as a queue, just like the first example. After that, we add the sum(), sub(), mul() and div() functions to the queue.

In the executeFunctions() function, we use a for loop to call all functions in queue order. In addition, we also used the call() method to call a function from the queue.

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

Copy after login

Users learned to store functions in a queue and execute them in queue order. In JavaScript, there is no built-in queue data structure, but we can use arrays as queues.

In the first example, we have used the shift() method to deque the queue. In the second example, we have used the for loop to execute the functions in order.

The above is the detailed content of How to store JavaScript functions in a queue and execute them sequentially?. For more information, please follow other related articles on the PHP Chinese website!