Evitarea recursiunii în funcția de prezentare de diapozitive JavaScript cu promisiuni

Modificarea funcției JavaScript recursive pentru a evita depășirea stivei de apeluri

JavaScript - Abordare bazată pe promisiuni cu o buclă de interval pentru a evita recursiunea

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

Utilizarea JavaScript asincron fără recursivitate

JavaScript - Soluție folosind o buclă cu Promises și evitând 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);
  }
}

Întrebări frecvente despre evitarea recursiunii în prezentarea de diapozitive JavaScript

1. Ce este recursiunea în JavaScript și de ce este o problemă în prezentările de diapozitive?
2. Recursiunea apare atunci când o funcție se autoapelează și, dacă este făcută continuu, poate duce la depășirea stivei. Într-o prezentare de diapozitive, acest lucru ar cauza o utilizare excesivă a memoriei și ar putea bloca browserul.
3. Cum pot evita recursiunea într-o funcție JavaScript?
4. O soluție este utilizarea setInterval sau setTimeout pentru a programa sarcini fără recursivitate. O altă opțiune este modelul bazat pe evenimente, în care funcțiile sunt declanșate de anumite evenimente ale utilizatorului sau ale browserului.
5. De ce am încercat să folosesc while(true) blocați browserul?
6. Folosind while(true) fără o operație asincronă ca await sau setTimeout rulează într-o buclă continuă fără întrerupere, ceea ce blochează firul principal, provocând blocarea browserului.
7. Pot folosi Promises pentru a evita recursiunea?
8. Da, Promises permite execuția asincronă fără apeluri recursive de funcții. Acest lucru asigură că fiecare operație se finalizează înainte de începerea următoarei, prevenind depășirea stivei.
9. Ce este requestAnimationFrame si cum ajuta?
10. requestAnimationFrame este o metodă care vă permite să creați animații fluide sincronizate cu rata de reîmprospătare a browserului. Este eficient și previne calculele inutile atunci când fila browser este inactivă.

Evitarea recursiunii pentru bucle continue

Evitarea recursiunii în funcțiile JavaScript, în special atunci când se utilizează Promisiuni, este critic pentru menținerea performanței. Trecând la o abordare bazată pe bucle sau la un model bazat pe evenimente, dezvoltatorii pot preveni creșterea nesfârșită a stivei de apeluri și pot evita blocările browserului.

Folosind metode precum setInterval sau requestAnimationFrame, precum și gestionarea eficientă a operațiunilor asincrone, va permite executarea fără probleme a sarcinilor precum prezentările de diapozitive. Aceste soluții oferă o gestionare mai bună a memoriei și previn problemele asociate apelurilor recursive de funcții, asigurând stabilitate în procesele de lungă durată.