【メモ】JavaScriptのキューで非同期タスクを実行する

要件の概要#

指定されたデータ（ここでは配列）を反復処理し、データ項目ごとに非同期タスクを実行します。

【【だから機械翻訳のファイル名は本当に意味があるのかな「- -」】】

コード#

(() => {
  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"
        }
      ]
    }
  ];

  // キューを実行し、2番目のパラメータでループ実行を制御します
  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);
})();