ForEach 루프 내에서 비동기 처리 후 콜백 함수를 실행하는 방법은 무엇입니까?

비동기 반복 처리 후 콜백 완료

문제 설명:

요소 배열이 주어지면 어떻게 호출할 수 있습니까? forEach 루프 내의 모든 비동기 처리 후 콜백 함수 완료되었습니까?

해결책 1: 카운터 기반 접근 방식

• 각 비동기 콜백 내에서 카운터를 증가시킵니다.
• "완료" 콜백을 실행합니다. 카운터가 총 개수에 도달하면 요소.

<code class="javascript">function callback () { console.log('all done'); }

var itemsProcessed = 0;

[1, 2, 3].forEach((item, index, array) => {
  asyncFunction(item, () => {
    itemsProcessed++;
    if(itemsProcessed === array.length) {
      callback();
    }
  });
});</code>

솔루션 2: 약속 기반 접근 방식

동기 실행:

• reduce()를 사용하여 체인 약속을 하고 Promise.resolve()는 동기 실행을 보장합니다.

<code class="javascript">let requests = [1, 2, 3].reduce((promiseChain, item) => {
  return promiseChain.then(() => new Promise((resolve) => {
    asyncFunction(item, resolve);
  }));
}, Promise.resolve());

requests.then(() => console.log('done'));</code>

비동기 실행:

• map()을 사용하여 Promise 배열을 만듭니다.
• 모든 Promise가 완료되면 Promise.all()을 사용하여 "완료" 콜백을 호출합니다. 해결되었습니다.

<code class="javascript">let requests = [1, 2, 3].map((item) => {
  return new Promise((resolve) => {
    asyncFunction(item, resolve);
  });
});

Promise.all(requests).then(() => console.log('done'));</code>

해결책 3: 비동기 라이브러리 사용

• async와 같은 라이브러리를 활용하여 비동기 프로그래밍 패턴을 단순화하세요.
• 에서 제공하는 콜백 완료 메커니즘에 대한 특정 문서를 참조하세요. 도서관.

위 내용은 ForEach 루프 내에서 비동기 처리 후 콜백 함수를 실행하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!