Undvika rekursion i JavaScript-bildspelsfunktion med löften

Ändra rekursiv JavaScript-funktion för att undvika överflöde av samtalsstack

JavaScript - Löftesbaserat tillvägagångssätt med en intervallslinga för att undvika rekursion

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

Använda asynkron JavaScript utan rekursion

JavaScript - Lösning som använder en loop med Promises och undviker 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);
  }
}

Vanliga frågor om att undvika rekursioner i JavaScript-bildspel

1. Vad är rekursion i JavaScript och varför är det ett problem i bildspel?
2. Rekursion uppstår när en funktion anropar sig själv, och om den görs kontinuerligt kan det leda till stackoverflow. I ett bildspel skulle detta orsaka överdriven minnesanvändning och potentiellt krascha webbläsaren.
3. Hur kan jag undvika rekursioner i en JavaScript-funktion?
4. En lösning är att använda setInterval eller setTimeout att schemalägga uppgifter utan rekursioner. Ett annat alternativ är den händelsestyrda modellen, där funktioner utlöses av specifika användar- eller webbläsarhändelser.
5. Varför gjorde mitt försök att använda while(true) låsa webbläsaren?
6. Använder while(true) utan en asynkron operation som await eller setTimeout körs i en kontinuerlig slinga utan att pausa, vilket blockerar huvudtråden, vilket gör att webbläsaren fryser.
7. Kan jag använda Promises för att undvika rekursion?
8. Ja, Promises tillåt asynkron exekvering utan rekursiva funktionsanrop. Detta säkerställer att varje operation slutförs innan nästa startar, vilket förhindrar stackspill.
9. Vad är requestAnimationFrame och hur hjälper det?
10. requestAnimationFrame är en metod som låter dig skapa smidiga animationer synkroniserade med webbläsarens uppdateringsfrekvens. Det är effektivt och förhindrar onödiga beräkningar när webbläsarfliken är inaktiv.

Undvika rekursion för kontinuerliga loopar

Undvika rekursioner i JavaScript-funktioner, särskilt vid användning Löften, är avgörande för att upprätthålla prestanda. Genom att byta till ett loop-baserat tillvägagångssätt eller händelsedriven modell kan utvecklare förhindra att anropsstacken växer oändligt och undvika webbläsarkrascher.

Att använda metoder som setInterval eller requestAnimationFrame, såväl som att hantera asynkrona operationer effektivt, kommer att möjliggöra smidigt exekvering av uppgifter som bildspel. Dessa lösningar erbjuder bättre minneshantering och förhindrar problem i samband med rekursiva funktionsanrop, vilket säkerställer stabilitet i långa processer.