ForEach 루프 내에서 비동기 처리 후 콜백 함수를 실행하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

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

Susan Sarandon

풀어 주다： 2024-11-04 15:10:02

원래의

260명이 탐색했습니다.

How to Execute a Callback Function After Asynchronous Processing within a ForEach Loop?

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

문제 설명:

요소 배열이 주어지면 어떻게 호출할 수 있습니까? 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: 비동기 라이브러리 사용