JavaScript 实现异步任务循环顺序执行

JavaScript 实现异步任务循环顺序执行

需求场景:数组的元素作为异步任务的参数,循环遍历该数组,并执行异步任务。

一、错误的实现

简单的错误实现

// 异步任务的参数数组
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");
}
});
});

执行结果输出:

img

由上图可知,所有异步任务的执行是同时开始,并同时结束的,并未按顺序先后执行。

使用 Promise.all 的错误实现

Promise.all() 是一个用于并行执行多个 Promise 的方法,当所有的 Promise 都成功执行后,它返回一个包含所有 Promise 结果的数组,如果其中任何一个 Promise 失败或出错,它将直接跳转到 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);
});

执行结果输出:

img

由上图可知,循环中的所有异步任务的执行是并行执行的,并未按顺序先后执行。因为 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);
});

执行结果输出:

img

posted @   飞仔FeiZai  阅读(874)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示