Unngå rekursjon i JavaScript-lysbildefremvisningsfunksjon med løfter

Endre rekursiv JavaScript-funksjon for å unngå overløp av anropsstabel

JavaScript - Løftebasert tilnærming med en intervallløkke for å unngå rekursjon

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);
}

Bruk av asynkron JavaScript uten rekursjon

JavaScript - Løsning ved å bruke en loop med Promises og unngå 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);
  }
}

Vanlige spørsmål om å unngå rekursjon i JavaScript-lysbildefremvisning

1. Hva er rekursjon i JavaScript og hvorfor er det et problem i lysbildefremvisninger?
2. Rekursjon oppstår når en funksjon kaller seg selv, og hvis den gjøres kontinuerlig, kan det føre til stackoverflyt. I en lysbildefremvisning vil dette føre til overdreven minnebruk og potensielt krasje nettleseren.
3. Hvordan kan jeg unngå rekursjon i en JavaScript-funksjon?
4. En løsning er å bruke setInterval eller setTimeout å planlegge oppgaver uten rekursjon. Et annet alternativ er den hendelsesdrevne modellen, der funksjoner utløses av spesifikke bruker- eller nettleserhendelser.
5. Hvorfor gjorde mitt forsøk på å bruke while(true) låse opp nettleseren?
6. Bruker while(true) uten en asynkron operasjon som await eller setTimeout kjører i en kontinuerlig sløyfe uten pause, noe som blokkerer hovedtråden og får nettleseren til å fryse.
7. Kan jeg bruke Promises for å unngå rekursjon?
8. Ja, Promises tillate asynkron kjøring uten rekursive funksjonskall. Dette sikrer at hver operasjon fullføres før den neste starter, og forhindrer stabeloverflyt.
9. Hva er requestAnimationFrame og hvordan hjelper det?
10. requestAnimationFrame er en metode som lar deg lage jevne animasjoner synkronisert med nettleserens oppdateringsfrekvens. Det er effektivt og forhindrer unødvendige beregninger når nettleserfanen er inaktiv.

Unngå rekursjon for kontinuerlige sløyfer

Unngå rekursjon i JavaScript-funksjoner, spesielt ved bruk Løfter, er avgjørende for å opprettholde ytelsen. Ved å bytte til en sløyfebasert tilnærming eller hendelsesdrevet modell, kan utviklere forhindre at anropsstakken vokser uendelig og unngå nettleserkrasj.

Ved å bruke metoder som settintervall eller requestAnimationFrame, så vel som å håndtere asynkrone operasjoner effektivt, vil tillate jevn utførelse av oppgaver som lysbildefremvisninger. Disse løsningene tilbyr bedre minnehåndtering og forhindrer problemene forbundet med rekursive funksjonsoppkall, og sikrer stabilitet i langvarige prosesser.