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

舌吻

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

需求场景：数组的元素作为异步任务的参数，循环遍历该数组，并执行异步任务。
一、错误的实现

简单的错误实现

1. // 异步任务的参数数组
2. const arr = [1, 2, 3, 4];
3. // 异步任务函数
4. function task(params, callback) {
5.   setTimeout(() => {
6.     if (!!callback) {
7.       callback(params);
8.     }
9.   }, 1000);
10. }
11. // 循环遍历异步任务的参数数组，并执行异步任务
12. console.time("Test code");
13. arr.forEach((item, index) => {
14.   task(item, (ret) => {
15.     console.log("ret", ret);
16.     console.timeEnd("Test code");
18.     if (index + 1 < arr.length) {
19.       console.time("Test code");
20.     }
21.   });
22. });

复制代码

执行结果输出：

由上图可知，只有在执行第一次异步任务时耗时近 1 秒，其它异步任务执行时间远远达不到 1 秒。导致该问题的原因有待进一步深入研究。
使用 Promise.all 的错误实现

1. // 异步任务的参数数组
2. const arr = [1, 2, 3, 4];
3. // 异步任务函数
4. function task(params, callback) {
5.   setTimeout(() => {
6.     if (!!callback) {
7.       callback(params);
8.     }
9.   }, 1000);
10. }
12. const tasks = [];
14. // 循环遍历异步任务的参数数组，并执行异步任务
15. console.time("Test code");
16. arr.forEach((item, index) => {
17.   tasks.push(
18.     new Promise((resolve) => {
19.       task(item, (ret) => {
20.         console.log("ret", ret);
21.         console.timeEnd("Test code");
23.         if (index + 1 < arr.length) {
24.           console.time("Test code");
25.         }
26.         resolve(ret);
27.       });
28.     })
29.   );
30. });
32. Promise.all(tasks)
33.   .then((values) => {
34.     console.log(values);
35.   })
36.   .catch((error) => {
37.     console.error(error);
38.   });

复制代码

执行结果输出：

由上图可知，该种实现方式的结果和第一种方式差不多，也是只有在执行第一次异步任务时耗时 1 秒左右，剩下的异步任务执行时间达不到 1 秒。同样，该问题也需要对其深层的原因进行研究。
二、正确的实现

1. // 异步任务的参数数组
2. const arr = [1, 2, 3, 4];
3. // 异步任务函数
4. function task(params, callback) {
5.   setTimeout(() => {
6.     if (!!callback) {
7.       callback(params);
8.     }
9.   }, 1000);
10. }
12. const tasks = [];
14. console.time("Test code");
15. arr.forEach((item, index) => {
16.   tasks.push(function () {
17.     return new Promise((resolve) => {
18.       task(item, (ret) => {
19.         console.log("ret", ret);
20.         console.timeEnd("Test code");
21.         if (index + 1 < arr.length) {
22.           console.time("Test code");
23.         }
24.         resolve(ret);
25.       });
26.     });
27.   });
28. });
30. // 定义一个递归函数来依次执行任务
31. function runTasks(index) {
32.   if (index >= tasks.length) {
33.     // 如果所有任务都已经执行完毕，返回一个 resolved 的 Promise
34.     return Promise.resolve();
35.   }
37.   // 执行当前任务，然后递归执行下一个任务
38.   return tasks[index]().then(function () {
39.     return runTasks(index + 1);
40.   });
41. }
43. // 调用递归函数来执行任务
44. runTasks(0)
45.   .then(function () {
46.     console.log("All tasks are done!");
47.   })
48.   .catch(function (error) {
49.     console.error(error);
50.   });

复制代码

执行结果输出：

来源:https://www.cnblogs.com/yuzhihui/p/17222521.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！