【备忘】JavaScript 队列执行异步任务

吐槽/反馈/建议:我的咸鱼心    爱发电-@wdssmq

需求概述

遍历给定数据(此处为数组),依次执行针对数据项的异步任务。

【【所以机翻的文件名真的有意义么「- -」】】

代码

(() => {
  const items = [
    {
      "code": 1,
      "name": "A",
      "children": [
        {
          "code": 101,
          "name": "A-a"
        },
        {
          "code": 102,
          "name": "A-b"
        }
      ]
    },
    {
      "code": 2,
      "name": "B",
      "children": [
        {
          "code": 201,
          "name": "B-a"
        },
        {
          "code": 102,
          "name": "B-b"
        }
      ]
    }
  ];

  // 执行队列,第二个参数控制是否循环执行
  async function runPromiseByQueue(listPromises, loop = 0) {
    // console.log(listPromises);
    for (let itemPromise of listPromises) {
      await itemPromise();
    }
    if (loop) {
      await runPromiseByQueue(listPromises, loop);
    }
  }

  // 返回项为一个函数,该函数调用时会建立一个 Promise 对象并立即执行
  // 当内部调用 solve() 时表示该异步项执行结束
  const createPromise = (item, level = 0) => () =>
    new Promise((solve) => {
      setTimeout(async () => {
        console.log(level, item.name);
        if (item.hasOwnProperty("children")) {
          level++;
          const curQueue = createQueue(item.children, level);
          await runPromiseByQueue(curQueue);
        }
        solve();
      }, 1370);
    });

  const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  // // 理论上也可以像下边这样延迟
  // const createPromise = (item, level = 0) => () =>
  //   new Promise((solve) => {
  //     (async () => {
  //       await sleep(1370);
  //       console.log(level, item.name);
  //       if (item.hasOwnProperty("children")) {
  //         level++;
  //         const curQueue = createQueue(item.children, level);
  //         await runPromiseByQueue(curQueue);
  //       }
  //       solve();
  //     })();
  //   })

  // 构造任务队列
  const createQueue = (arr, level = 0) => {
    return arr.map((item) => {
      return createPromise(item, level);
    });
  };

  // 执行
  const curQueue = createQueue(items);

  runPromiseByQueue(curQueue);

  // // 循环执行
  // runPromiseByQueue(curQueue, 1);
})();

爱发电

本文标题:《【备忘】JavaScript 队列执行异步任务》作者:沉冰浮水
原文链接:https://www.wdssmq.com/post/20210529408.html
特别注明外均为原创,转载请注明。

分享到微信

扫描二维码

可在微信查看或分享至朋友圈。

相关文章

6度小K 6度小K 发布于 2010-10-20 10:01:19  
#cmt2501
我想结婚了……
回复
沉冰浮水 沉冰浮水 发布于 2010-10-19 19:38:00  
https://www.wdssmq.com
当然是为了个性些啊。。反正有自动填表插件。。
回复
Kada Kada 发布于 2010-10-19 17:33:14  
#cmt2499
你为什么搞个评论还有个性签名?
回复
发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最近发表

《憨豆特工 3》是 18 年的作品,当时圣城还在。

失败原因: 15天内未发起转移 ← 这什么鬼原因。。

咸能使者 / 我的咸鱼心 /咸鱼哪有心 / 咸鱼特攻队 —— \|QQ群:189574683 \|井盖:jgchat.net/i/q7UmX2J8

「中国平安」是国内骚扰民众最严重的品牌,,没有之一。

贷款或卖房子的一般并不能知道他们背后是哪家公司,也没什么名气。

支付宝扫码竟然登录不了阿里云盘???差评。。

转嘟和图片。。。

《月刊》更了三卷,《宅恋》直接完结,然后《女高》什么时候更新呢。

站点信息

  • 文章总数:2929
  • 页面总数:1
  • 分类总数:8
  • 标签总数:761
  • 评论总数:4701
  • 浏览总数:5623820
召唤伊斯特瓦尔