JavaScript/Promise/配列から呼ぶ非同期関数を直列に実行するの変更点

追加された行はこの色です。
削除された行はこの色です。
JavaScript/Promise/配列から呼ぶ非同期関数を直列に実行するへ行く。
JavaScript/Promise/配列から呼ぶ非同期関数を直列に実行するの差分を削除

#author("2022-05-19T12:47:02+09:00","default:ryuichi","ryuichi")
#author("2022-05-19T12:49:07+09:00","default:ryuichi","ryuichi")
* 配列から呼ぶ非同期関数を直列に実行する [#n713bfd6]

** 命題 [#i137d58f]

配列がある時に、ループでその値を利用して非同期関数を呼ぶが、その実行を直列にしたい

** 解決 [#w2e727aa]

 async function sleep(time) {
     return new Promise((resolve) => { setTimeout(resolve, time) });
 }
 
 const times = [3000, 1000, 2000];
 
 void (async () => {
    for (t of times) {
        console.log(t + " start");
        await sleep(t);
        console.log(t + " end");
    }
 })();
 
 
 🡳 🡳 🡳
 
 3000 start
 3000 end
 1000 start
 1000 end
 2000 start
 2000 end


- forを使う
- 非同期関数sleep()が配列timesの順番通りに3000、1000、2000の順に呼ばれて完了している

- なお、forを即時実行関数 '''void (async() => {})()'''でくるんでいるのは、JavaScriptの仕様上、awaitはasyncの中でしか実行できないから
*** map()やPromise.all()を使うと順番通りに完了しない [#jd94d4e4]

 void (async () => {
     times.map(async (t) => {
         console.log(t + " start");
         await sleep(t);
         console.log(t + " end");
     });
 })();
 
 🡳 🡳 🡳
 
 3000 start
 1000 start
 2000 start
 1000 end
 2000 end
 3000 end


 void (() => {
     Promise.all(times.map(async (t) => {
         console.log(t + " start");
         await sleep(t);
         console.log(t + " end");
     }));
 })();
 
 🡳 🡳 🡳
 
 3000 start
 1000 start
 2000 start
 1000 end
 2000 end
 3000 end