Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to store JavaScript functions in a queue and execute in that order?
In JavaScript, you may need to store functions in a queue and execute them in a specific order. Since JavaScript doesn't have a built-in queue data structure, we can use arrays with push() to enqueue functions and shift() to dequeue them.
This pattern is useful for managing asynchronous operations, implementing task schedulers, or controlling execution flow in applications.
Basic Queue Operations
A function queue uses these core operations:
-
Enqueue: Add function to the end using
push() -
Dequeue: Remove and execute function from the front using
shift() - Execute: Call functions in First-In-First-Out (FIFO) order
Syntax
// Basic execution pattern
while (queue.length > 0) {
queue[0](); // Execute first function
queue.shift(); // Remove it from queue
}
Example 1: Sequential Function Execution
This example demonstrates adding functions to a queue and executing them one by one using the dequeue approach:
<html>
<body>
<h3>Function Queue with Sequential Execution</h3>
<div id="content"></div><br>
<button onclick="executeFunctions()">Execute Functions in Queue Order</button>
<script>
let content = document.getElementById("content");
var queue = [];
function executeFunctions() {
content.innerHTML = ""; // Clear previous output
while (queue.length > 0) {
queue[0](); // Execute first function
queue.shift(); // Remove it from queue
}
// Refill queue for next execution
queue.push(function1, function2, function3);
}
function function1() {
content.innerHTML += "Function 1 executed<br>";
}
function function2() {
content.innerHTML += "Function 2 executed<br>";
}
function function3() {
content.innerHTML += "Function 3 executed<br>";
}
// Initialize queue
queue.push(function1);
queue.push(function2);
queue.push(function3);
</script>
</body>
</html>
Example 2: Mathematical Operations Queue
This example shows using a for loop to execute all queued functions without removing them, useful when you want to preserve the queue:
<html>
<body>
<h3>Mathematical Operations Queue</h3>
<div id="content"></div><br>
<button onclick="executeFunctions()">Execute All Operations</button>
<script>
let content = document.getElementById("content");
var queue = [];
function executeFunctions() {
content.innerHTML = ""; // Clear previous results
for (let i = 0; i < queue.length; i++) {
queue[i].call(); // Execute each function
}
}
let a = 10;
let b = 5;
function sum() {
content.innerHTML += "Sum of " + a + " and " + b + " is " + (a + b) + "<br>";
}
function sub() {
content.innerHTML += "Subtraction of " + a + " and " + b + " is " + (a - b) + "<br>";
}
function mul() {
content.innerHTML += "Multiplication of " + a + " and " + b + " is " + (a * b) + "<br>";
}
function div() {
content.innerHTML += "Division of " + a + " and " + b + " is " + (a / b) + "<br>";
}
// Add functions to queue
queue.push(sum, sub, mul, div);
</script>
</body>
</html>
Comparison of Execution Methods
| Method | Preserves Queue? | Use Case |
|---|---|---|
| while + shift() | No | One-time execution, task processing |
| for loop + call() | Yes | Reusable operations, repeated execution |
Key Points
- Use arrays to implement function queues in JavaScript
-
push()adds functions to the end (enqueue) -
shift()removes from the beginning (dequeue) - Choose execution method based on whether you need to preserve the queue
Conclusion
Function queues provide controlled execution order using arrays as the underlying data structure. Use shift() for one-time processing or loops for reusable execution patterns.
780 Views
