Evitar la recurrència a la funció de presentació de diapositives de JavaScript amb promeses

Modificació de la funció JavaScript recursiva per evitar el desbordament de la pila de trucades

JavaScript - Enfocament basat en promeses amb un bucle d'interval per evitar la recursivitat

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

Ús de JavaScript asíncron sense recursivitat

JavaScript: solució utilitzant un bucle amb Promeses i evitant 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);
  }
}

Preguntes habituals sobre com evitar la recurrència a la presentació de diapositives de JavaScript

1. Què és la recursivitat a JavaScript i per què és un problema a les presentacions de diapositives?
2. La recurssió es produeix quan una funció es crida a si mateixa i, si es fa contínuament, pot provocar un desbordament de la pila. En una presentació de diapositives, això provocaria un ús excessiu de memòria i potencialment bloquejaria el navegador.
3. Com puc evitar la recursivitat en una funció JavaScript?
4. Una solució és utilitzar setInterval o setTimeout per programar tasques sense recursivitat. Una altra opció és el model basat en esdeveniments, on les funcions són activades per esdeveniments específics d'usuari o navegador.
5. Per què vaig intentar utilitzar-lo while(true) bloquejar el navegador?
6. Utilitzant while(true) sense una operació asíncrona com await o setTimeout s'executa en un bucle continu sense aturar-se, cosa que bloqueja el fil principal i fa que el navegador es bloquegi.
7. Puc utilitzar Promises per evitar la recursivitat?
8. Sí, Promises permet l'execució asíncrona sense crides de funcions recursives. Això garanteix que cada operació es completi abans que comenci la següent, evitant el desbordament de la pila.
9. Què és requestAnimationFrame i com ajuda?
10. requestAnimationFrame és un mètode que permet crear animacions suaus sincronitzades amb la freqüència de refresc del navegador. És eficient i evita càlculs innecessaris quan la pestanya del navegador està inactiva.

Evitar la recurrència per a bucles continus

Evitar la recursivitat a les funcions de JavaScript, especialment quan s'utilitzen Promeses, és fonamental per mantenir el rendiment. En canviar a un enfocament basat en bucles o a un model basat en esdeveniments, els desenvolupadors poden evitar que la pila de trucades creixi sense parar i evitar bloquejos del navegador.

Utilitzant mètodes com setInterval o requestAnimationFrame, així com la gestió eficaç de les operacions asíncrones, permetran una execució fluida de tasques com ara les presentacions de diapositives. Aquestes solucions ofereixen una millor gestió de la memòria i eviten els problemes associats a les trucades de funcions recursives, garantint l'estabilitat en els processos de llarga durada.