Promise를 사용하여 JavaScript 슬라이드쇼 함수의 재귀 방지

호출 스택 오버플로를 방지하기 위해 재귀 JavaScript 함수 수정

JavaScript - 재귀를 방지하기 위해 간격 루프를 사용하는 약속 기반 접근 방식

const duration = 2000; // Time to display each slide in milliseconds
const sizes = [[4000, 500], [1000, 4000], [600, 400], [100, 200], [4000, 4000]];
let n = 0;
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

function showSlides(duration) {
  const myParent = document.querySelector('#slide-div');
  setInterval(async () => {
    let sizeIndex = n++ % sizes.length;
    let w = sizes[sizeIndex][0];
    let h = sizes[sizeIndex][1];
    let myRandomizer = `https://placehold.co/${w}x${h}?text=${w}x${h}`;

    try {
      let myResponse = await fetch(myRandomizer);
      let myBlob = await myResponse.blob();
      let myUrl = URL.createObjectURL(myBlob);
      URL.revokeObjectURL(myParent.querySelector('img').src);
      myParent.querySelector('img').src = myUrl;
    } catch (error) {
      console.error('Error: ', error);
    }
  }, duration);
}

재귀 없이 비동기 JavaScript 사용

JavaScript - 약속과 함께 루프를 사용하고 setInterval을 피하는 솔루션

const duration = 2000; // Time to display each slide in milliseconds
const sizes = [[4000, 500], [1000, 4000], [600, 400], [100, 200], [4000, 4000]];
let n = 0;
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function showSlides(duration) {
  const myParent = document.querySelector('#slide-div');

  while (true) {
    let sizeIndex = n++ % sizes.length;
    let w = sizes[sizeIndex][0];
    let h = sizes[sizeIndex][1];
    let myRandomizer = `https://placehold.co/${w}x${h}?text=${w}x${h}`;

    try {
      let myResponse = await fetch(myRandomizer);
      let myBlob = await myResponse.blob();
      let myUrl = URL.createObjectURL(myBlob);
      URL.revokeObjectURL(myParent.querySelector('img').src);
      myParent.querySelector('img').src = myUrl;
    } catch (error) {
      console.error('Error: ', error);
    }

    await sleep(duration);
  }
}

JavaScript 슬라이드쇼의 재귀 방지에 대한 일반적인 질문

1. JavaScript의 재귀란 무엇이며 슬라이드쇼에서 왜 문제가 됩니까?
2. 재귀는 함수가 자신을 호출할 때 발생하며, 계속 호출할 경우 스택 오버플로가 발생할 수 있습니다. 슬라이드쇼에서 이로 인해 과도한 메모리 사용이 발생하고 잠재적으로 브라우저가 중단될 수 있습니다.
3. JavaScript 함수에서 재귀를 방지하려면 어떻게 해야 합니까?
4. 하나의 솔루션을 사용하고 있습니다 setInterval 또는 setTimeout 재귀 없이 작업을 예약합니다. 또 다른 옵션은 특정 사용자 또는 브라우저 이벤트에 의해 기능이 트리거되는 이벤트 중심 모델입니다.
5. 왜 사용하려고 했습니까? while(true) 브라우저를 잠그시겠어요?
6. 사용 while(true) 같은 비동기 작업 없이 await 또는 setTimeout 일시 중지하지 않고 연속 루프로 실행되어 기본 스레드를 차단하여 브라우저가 정지됩니다.
7. 사용할 수 있나요? Promises 재귀를 피하기 위해?
8. 예, Promises 재귀 함수 호출 없이 비동기 실행을 허용합니다. 이렇게 하면 다음 작업이 시작되기 전에 각 작업이 완료되어 스택 오버플로가 방지됩니다.
9. 무엇인가요 requestAnimationFrame 어떻게 도움이 되나요?
10. requestAnimationFrame 브라우저의 새로 고침 빈도와 동기화된 부드러운 애니메이션을 만들 수 있는 방법입니다. 이는 효율적이며 브라우저 탭이 비활성화되어 있을 때 불필요한 계산을 방지합니다.

연속 루프의 재귀 방지

특히 다음을 사용할 때 JavaScript 함수의 재귀 방지 약속는 성능을 유지하는 데 중요합니다. 루프 기반 접근 방식이나 이벤트 중심 모델로 전환하면 개발자는 호출 스택이 끝없이 커지는 것을 방지하고 브라우저 충돌을 방지할 수 있습니다.

다음과 같은 방법을 사용하여 간격 설정 또는 요청애니메이션프레임, 비동기 작업을 효과적으로 처리할 뿐만 아니라 슬라이드쇼와 같은 작업을 원활하게 실행할 수 있습니다. 이러한 솔루션은 더 나은 메모리 관리를 제공하고 재귀 함수 호출과 관련된 문제를 방지하여 장기 실행 프로세스의 안정성을 보장합니다.