JavaScript의 비동기 루프

JavaScript는 다양한 유형의 루프를 제공하지만 비동기 호출을 기다리기 위해 실행을 일시 중지하는 루프를 만드는 것은 다음과 같습니다. 도전적이다. 동기식 코드와 비동기식 코드를 혼합하면 예상치 못한 동작이 발생할 수 있기 때문입니다.

해결책: 비동기식 접근 방식 수용

이 한계를 극복하려면 이벤트를 완전히 수용해야 합니다. JavaScript의 중심 접근 방식. 여기에는 비동기 호출이 완료될 때 호출되는 함수를 사용하는 것이 포함됩니다. 그러면 콜백이 호출된 후 루프가 계속 실행될 수 있습니다.

asyncLoop 함수 소개

이 비동기 루프 동작을 용이하게 하기 위해 asyncLoop라는 도우미 함수를 생성할 수 있습니다. 세 가지 매개변수가 필요합니다:

• iterations: 루프가 실행되어야 하는 횟수.
• func: 각 반복에서 실행할 함수.
• 콜백: 루프가 완료될 때 호출되는 함수입니다.

asyncLoop 함수는 현재 반복을 추적하기 위해 내부 변수 인덱스를 유지하고 루프가 완료된 시기를 나타내기 위해 완료 변수에 플래그를 지정합니다. 함수 내에는 다음 메서드를 제공하는 내부 루프 개체가 있습니다.

• next(): 루프를 한 번 반복합니다.
• iteration(): 현재 반복을 반환합니다.
• break(): 루프를 조기에 종료합니다.

루프를 시작하려면 loop.next()가 호출됩니다. func 함수가 호출될 때마다 loop.next()를 호출하여 루프를 계속하거나 loop.break()를 호출하여 루프를 종료할 수 있습니다.

사용 예:

다음 예에서는 asyncLoop 함수를 사용하여 비동기 루프를 생성하는 방법을 보여줍니다.

asyncLoop(10, (loop) => {
  someFunction(1, 2, (result) => {
    console.log(loop.iteration());
    loop.next();
  });
}, () => {
  console.log('cycle ended');
});

이 코드는 someFunction을 비동기적으로 10번 실행하고 콘솔에 반복 횟수를 기록합니다. 루프가 완료되면 주기 종료 메시지가 인쇄됩니다.

이 접근 방식을 활용하면 JavaScript 개발자는 이벤트 중심 환경에서 원활하게 작동하는 비동기 루프를 생성하여 스크립트 및 브라우저 차단과 관련된 잠재적인 문제를 방지할 수 있습니다.