本文详细解析JavaScript中异步任务在循环中的执行顺序问题。通过对比forEach直接调用、Promise.all并行执行以及递归调用的三种实现方式，指出前两者无法保证顺序执行的缺陷。重点介绍了利用递归函数结合Promise链式调用来实现异步任务按数组顺序依次执行的正确方案，并附带完整代码示例与结果分析。
应用场景：需要将数组中的元素作为异步任务的参数，通过循环遍历该数组，并依次执行对应的异步任务。
一、常见的错误实现方式
第一种：简单的循环调用
// 异步任务的参数数组
const arr = [1, 2, 3, 4];
// 异步任务函数
function task(params, callback) {
setTimeout(() => {
if (!!callback) {
callback(params);
}
}, 1000);
}
// 循环遍历异步任务的参数数组，并执行异步任务
console.time("Test code");
arr.forEach((item, index) => {
task(item, (ret) => {
console.log("ret", ret);
console.timeEnd("Test code");
if (index + 1 < arr.length) {
console.time("Test code");
}
});
});
代码执行后的输出结果如下：
从上述输出可以看出，所有的异步任务几乎是同时启动，并在相同的时间点结束。这种实现方式并没有按照预期的顺序依次执行任务。
第二种：使用 Promise.all 的错误实现
Promise.all() 是一个用于并行执行多个 Promise 对象的工具方法。当数组中所有的 Promise 都成功解决（resolved）后，它会返回一个包含所有结果的数组。然而，如果其中任何一个 Promise 被拒绝（rejected）或发生错误，Promise.all 会立即跳转到 catch 块，并返回一个处于 rejected 状态的 Promise。
// 异步任务的参数数组
const arr = [1, 2, 3, 4];
// 异步任务函数
function task(params, callback) {
setTimeout(() => {
if (!!callback) {
callback(params);
}
}, 1000);
}
const tasks = [];
// 循环遍历异步任务的参数数组，并执行异步任务
console.time("Test code");
arr.forEach((item, index) => {
tasks.push(
new Promise((resolve) => {
task(item, (ret) => {
console.log("ret", ret);
console.timeEnd("Test code");
if (index + 1 < arr.length) {
console.time("Test code");
}
resolve(ret);
});
})
);
});
Promise.all(tasks)
.then((values) => {
console.log(values);
})
.catch((error) => {
console.error(error);
});
该方式的执行结果输出如下：
从输出结果可知，循环内的所有异步任务是并行执行的，而非按顺序先后执行。这是因为 Promise.all() 的设计初衷就是并行处理，它不会等待前一个 Promise 完成后再开始下一个，而是同时启动所有任务，因此无法保证执行顺序与数组顺序一致。
二、正确的实现方案
// 异步任务的参数数组
const arr = [1, 2, 3, 4];
// 异步任务函数
function task(params, callback) {
setTimeout(() => {
if (!!callback) {
callback(params);
}
}, 1000);
}
const tasks = [];
console.time("Test code");
arr.forEach((item, index) => {
tasks.push(function () {
return new Promise((resolve) => {
task(item, (ret) => {
console.log("ret", ret);
console.timeEnd("Test code");
if (index + 1 < arr.length) {
console.time("Test code");
}
resolve(ret);
});
});
});
});
// 定义一个递归函数来依次执行任务
function runTasks(index) {
if (index >= tasks.length) {
// 如果所有任务都已经执行完毕，返回一个 resolved 的 Promise
return Promise.resolve();
}
// 执行当前任务，然后递归执行下一个任务
return tasks[index]().then(function () {
return runTasks(index + 1);
});
}
// 调用递归函数来执行任务
runTasks(0)
.then(function () {
console.log("All tasks are done!");
})
.catch(function (error) {
console.error(error);
});
正确方案的执行结果输出如下：
以上就是关于JavaScript实现异步任务循环顺序执行的详细解析，更多相关JavaScript异步任务循环顺序执行内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！