极客笔记JavaScript 如何将函数存储在队列中并按顺序执行
有时候，开发人员可能需要将函数存储在队列中，并按照它们在队列中的顺序执行。在JavaScript中，我们可以使用数组来创建一个队列。我们可以使用数组的push()方法将函数入队列，使用shift()方法将函数出队列。
下面，我们将看到将JavaScript函数存储在队列中并按队列顺序执行的示例。
语法
用户可以按照下面的语法将JavaScript函数存储在队列中并按顺序执行。
while (queue.length > 0) {
queue[0]();
queue.shift();
}
我们在上述语法中使用while循环来遍历队列。我们执行队列中的第一个函数，然后将该函数从队列中删除。
示例
在下面的示例中，我们创建了一个名为queue的变量，并将其初始化为空数组，使其成为一个队列。
之后，我们创建了三个不同的函数，并使用数组的push()方法将所有函数添加到队列中。每当用户按下按钮时，就调用executeFunctions()函数。在executeFunctions()函数中，我们使用while循环从队列中弹出函数。在每次循环迭代中，我们执行数组中的第一个函数，并使用array.shift()方法从数组中删除第一个元素。
<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>
示例
在下面的示例中，我们创建了一个数组，使其像第一个示例一样作为队列工作。然后，我们将sum()、sub()、mul()和div()函数添加到队列中。
在executeFunctions()函数中，我们使用for循环按照队列的顺序调用所有函数。另外，我们使用call()方法从队列中调用函数。
<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>
用户学会了将函数存储在队列中，并按照队列顺序执行它们。在JavaScript中，没有内置的队列数据结构，但我们可以使用数组作为队列。
在第一个示例中，我们使用了shift()方法从队列中出队。在第二个示例中，我们使用for循环按顺序执行函数。