JavaScript를 사용하여 주기에 비동기식 쓰기

for문과 맵 함수에서 async/await를 사용할 때의 쓰기를 기록합니다.
각 비동기 처리를 점차적으로 집행하는 방법과 비동기 집행하는 방법 두 가지가 있다.

1. 동기화 실행

2. 비동기식 실행

await의 비동기 처리를 사용하려면 다음과 같습니다
sleep.js

// 引数に指定した秒数だけ待つsleep関数
// Promiseを返す
function sleep(second) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve()
        }, second * 1000)
    })
}

1. 동기화 방법

for문에서 await로 쓰면 for링의 내용이 순서대로 처리되기 때문에 동시 실행됩니다.여기에 적힌 것은 계수기를 사용하는 for문이며 for .. of문도 같은 행동을 할 수 있다.
syncLoop.js

async function syncLoop() {
    // 1~5までのランダムな整数の配列を生成
    const ran_arr = Array(5).fill(0).map(() => Math.floor(Math.random() * 5 + 1))

    // for文を使ってループ処理する
    for (let i = 0; i < ran_arr.length; i++) {
        await sleep(ran_arr[i]) // n秒待つ
        console.log(i+1 + "番目の処理が完了！！" + "待ち時間は" + ran_arr[i] + "秒！！")
    }
    console.log("終了！！")
}

// 実行
// awaitはトップレベルで使うことができない(ES2017時点)ので
// asyncをつけた即時関数を作って呼び出している
(async ()=>{
    console.log("同期的に呼び出す")
    await syncLoop()
}).call()

2. 비동기적으로 실행하는 방법

맵을 사용합니다.맵 매개 변수로 지정된 함수를 async 함수로 설정하여 맵에서 부르는 처리를 비동기적으로 실행하는 동시에 Promise<void>[] 함수로 맵의 반환값Promise.all()을 기다리면 모든 처리가 완료될 때까지 기다릴 수 있습니다.
asyncLoop.js

async function asyncLoop() {
    // 1~5までのランダムな整数の配列を生成
    const ran_arr = Array(5).fill(0).map(() => Math.floor(Math.random() * 5 + 1))

    // mapを使ってループ処理する
    await Promise.all(ran_arr.map(async (n, i) => {
        await sleep(n) // n秒待つ
        console.log(i+1 + "番目の処理が完了！！" + "待ち時間は" + n + "秒！！")
        return
    }))
    console.log("終了！！")
}

// 実行
// awaitはトップレベルで使うことができない(ES2017時点)ので
// asyncをつけた即時関数を作って呼び出している
(async ()=>{
    console.log("非同期的に呼び出す")
    await asyncLoop()
}).call()

첫 번째 방법은 다음 순환의 처리를 차단하기 때문에 기본적으로 두 번째 방법을 사용하고 비동기 처리의 집행 순서를 어떻게든 제어하고 싶을 때만 첫 번째 방법을 사용하면 성능에 비교적 좋다.
이상