Home > Article > Web Front-end > How to store JavaScript functions in a queue and execute them sequentially?

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

王林forward: 2023-08-24 18:05:02684browse

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

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>

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>

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!

JavaScript Array for while 循环数据结构 function

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：What is the ScrollView component and how to use it in React Native?Next article：What is the ScrollView component and how to use it in React Native?

See more

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

Syntax

Example

Example

Related articles