JS 루프에서 Wait를 사용할 때 어떤 '화학 반응'이 발생하는지 이야기해 보겠습니다.

이 기사에서는 JavaScript 루프에 대한 관련 지식을 주로 설명하고 관심 있는 친구들이 모두에게 도움이 되기를 바랍니다.

서문

이 질문은 어떻게 생겨났나요? 어느 날 비동기식 지식에 대해 배우던 중 다음 질문을 접하게 되었습니다. Promise를 사용하여 매초마다 배열에 값을 출력하세요

const arr = [1, 2, 3]
arr.reduce((pre, cur) => {
  return pre.then(() => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(console.log(cur))
      }, 1000);
    })
  })
}, Promise.resolve())

이 코드는 이해하기 매우 쉽고

Promise.resolve().then(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log(1))
    }, 1000);
  })
}).then(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log(2))
    }, 1000);
  })
}).then(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log(3))
    }, 1000);
  })
})

와 동일합니다. 읽고 나서 생각했습니다. 루프에서 값을 출력한 후 1초 동안 멈추면 문제도 해결될 수 있으므로 다음 코드가 있습니다

const arr = [1, 2, 3]
const sleep = (ms) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, ms)
  })
}
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
  await sleep(1000)
}

인쇄 결과도 예상과 일치합니다. 여기서 첫 번째 질문이 생성되었습니다. wait를 비동기와 함께 사용해야 합니까? 여기서는 어떻게 단독으로 사용할 수 있나요? (믿어지지 않는다면 브라우저 콘솔에 코드를 넣어보세요.)

for를 forEach로 변경했는데 효과가 전혀 달성되지 않은 것을 발견했습니다. 두 번째 질문이 생겼습니다. forEach에서 wait가 실패하는 이유는 무엇입니까?

arr.forEach(async item => {
  console.log(item);
  await sleep(1000)
})

이 두 가지 질문으로 공부하고 답을 찾아보세요.

await in the for loop

async/await를 배울 때 Wait는 async에서만 사용할 수 있다는 말이 있던 것을 기억합니다. 사실 이 문장은 틀린 것이 아닙니다. 그럼 왜 앞쪽에 Wait를 직접 쓸 수 있는 걸까요? 에디터에서 코드를 작성할 때 async

 <script>  
   const arr = [1, 2, 3]
   const sleep = (ms) => {
     return new Promise((resolve, reject) => {
       setTimeout(() => {
         resolve()
       }, ms)
     })
   }
   const logByOneSecond = async () => {
     for (let i = 0; i < arr.length; i++) {
       console.log(arr[i]);
       await sleep(1000)
     }
   }   
   logByOneSecond()
 </script>

를 사용해야 하는데 농담이군요 ㅎㅎ 그런데 안 할 때는요. 뭔가 이해가 가는데, 생각하는 다른 방법이 있어요.

좋아요, 위에서 언급한 것처럼 Wait는 JS가 Promise에 의해 처리 결과가 반환될 때까지 기다렸다가 계속 실행하도록 하는 역할을 하며 for...of, while도 가능합니다

const logByForof = async () => {
  for (const item of arr) {
    console.log(item);
    await sleep(1000)
  }    
}
logByForof()

const logByWhile = async () => {
  let i = 0
  while (i !== arr.length) {
    await sleep(1000)
    console.log(arr[i]);
    i++
  }
}
logByWhile()

결과도 다음과 같습니다. 기대에 따라 루프에서 대기를 사용하여 forEach 루프에서

await 효과를 얻을 수 있습니다. forEach가 유효하지 않습니다.

그러고 보니 설명은 이렇습니다.

forEach는 JavaScript에서 Promise 인식을 지원하지 않고, async, Wait도 지원하지 않기 때문에 forEach에서는 Wait를 사용할 수 없습니다.

• map/forEach는 콜백과 결합되어 함수를 실행하는 동안 내부적으로 사용하며, wait는 콜백 실행을 기다리지 않습니다.

• forEach는 동기 코드만 지원합니다.

• 향후 의사 코드를 단순화하는 두 번째 방법

while(index < arr.length){
  callback(item, index)
}

map/forEach는 간단한 실행 콜백 함수이며 비동기 상황을 처리하지 않습니다. 즉, map/forEach는 동시에 여러 콜백 함수를 생성하고 아래와 같이 여러 콜백 함수가 자체 비동기 및 대기로 추가됩니다.

async ()=>{
  await sleep(1000); 
} 
async ()=>{ 
  await sleep(1000);
} 
async ()=>{ 
  await sleep(1000);
}

각 함수는 독립적이며, 서로의 콜백도 요청에 독립적입니다. 비동기식이며 서로 관련이 없으며 순서를 보장할 수 없습니다.

요약

루프 문에서 async/await 사용을 검토했습니다. 일반 for 루프의 경우 모든 대기는 직렬 호출입니다. 예, 가능합니다. while, for-in, for-of 등을 포함하여 안심하고 사용하세요. 그러나 forEach, map, filter, Reduce 등과 같은 콜백이 포함된 배열 메서드는 부작용이 많으므로 사용하지 않는 것이 가장 좋습니다. 기다려 사용하세요.

【추천 학습:

javascript 고급 튜토리얼

】

위 내용은 JS 루프에서 Wait를 사용할 때 어떤 '화학 반응'이 발생하는지 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!