How to store JavaScript functions in a queue and execute in that order?


Sometimes, developers may require to store the function in the queue and execute it in the order it is stored in the queue. In JavaScript, we can create a queue using the array. We can use the push() method of the array to enqueue the function in the queue and the shift() method to deque 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 follow the syntax below to store JavaScript functions in a queue and execute in that order.

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

We use the while loop in the above syntax to iterate through the queue. We execute the first function from the queue, and after that, we remove the function from the queue.

Example

In the example below, we have created the queue variable and initialized it with the 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 example below, we have created the array to work as a queue like the first example. After that, we added the sum(), sub(), mul(), and div() functions to the queue.

In the executeFunctions() function, we used the for loop to call all functions in the queue order. Also, we have used the call() method to call the 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 the functions in the queue and execute them in the queue order. In JavaScript, there is no built-in queue data structure, but we can use an array as a queue.

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.

Updated on: 05-Apr-2023

408 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements