JavaScript를 사용하여 주기에 비동기식 쓰기
8421 단어 JavaScript
각 비동기 처리를 점차적으로 집행하는 방법과 비동기 집행하는 방법 두 가지가 있다.
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()
첫 번째 방법은 다음 순환의 처리를 차단하기 때문에 기본적으로 두 번째 방법을 사용하고 비동기 처리의 집행 순서를 어떻게든 제어하고 싶을 때만 첫 번째 방법을 사용하면 성능에 비교적 좋다.이상
Reference
이 문제에 관하여(JavaScript를 사용하여 주기에 비동기식 쓰기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/KuwaK/items/6455e34c245992a73aa1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)