Izvairīšanās no rekursijas JavaScript slaidrādes funkcijā ar solījumiem

Rekursīvās JavaScript funkcijas modificēšana, lai izvairītos no zvanu steka pārpildes

JavaScript — uz solījumu balstīta pieeja ar intervāla cilpu, lai izvairītos no atkārtošanās

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

Asinhronā JavaScript izmantošana bez rekursijas

JavaScript — risinājums, izmantojot cilpu ar solījumu un izvairoties no 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);
  }
}

Bieži uzdotie jautājumi par izvairīšanos no rekursijas JavaScript slaidrādē

1. Kas ir rekursija JavaScript un kāpēc tā ir problēma slaidrādēs?
2. Rekursija notiek, kad funkcija izsauc pati sevi, un, ja tā tiek veikta nepārtraukti, tā var izraisīt steka pārpildīšanu. Slaidrādē tas izraisītu pārmērīgu atmiņas izmantošanu un, iespējams, pārlūkprogrammas avāriju.
3. Kā es varu izvairīties no rekursijas JavaScript funkcijā?
4. Viens risinājums ir izmantot setInterval vai setTimeout lai ieplānotu uzdevumus bez atkārtošanās. Vēl viena iespēja ir uz notikumiem orientēts modelis, kurā funkcijas aktivizē konkrēti lietotāja vai pārlūkprogrammas notikumi.
5. Kāpēc mans mēģinājums izmantot while(true) bloķēt pārlūkprogrammu?
6. Izmantojot while(true) bez asinhronas darbības, piemēram await vai setTimeout darbojas nepārtrauktā ciklā bez pauzes, kas bloķē galveno pavedienu, izraisot pārlūkprogrammas sasalšanu.
7. Vai es varu izmantot Promises lai izvairītos no atkārtošanās?
8. Jā, Promises atļaut asinhronu izpildi bez rekursīviem funkciju izsaukumiem. Tas nodrošina, ka katra darbība tiek pabeigta pirms nākamās darbības sākuma, novēršot skursteņa pārplūdi.
9. Kas ir requestAnimationFrame un kā tas palīdz?
10. requestAnimationFrame ir metode, kas ļauj izveidot vienmērīgas animācijas, kas sinhronizētas ar pārlūkprogrammas atsvaidzes intensitāti. Tas ir efektīvs un novērš nevajadzīgus aprēķinus, kad pārlūkprogrammas cilne ir neaktīva.

Izvairīšanās no atkārtošanās nepārtrauktām cilpām

Izvairīšanās no atkārtošanās JavaScript funkcijās, it īpaši, ja to lietojat Solījumi, ir būtiska veiktspējas uzturēšanai. Pārejot uz cilpas pieeju vai uz notikumiem balstītu modeli, izstrādātāji var novērst zvanu kopas bezgalīgu pieaugumu un izvairīties no pārlūkprogrammas avārijām.

Izmantojot tādas metodes kā setInterval vai requestAnimationFrame, kā arī efektīva asinhrono darbību apstrāde, ļaus netraucēti izpildīt uzdevumus, piemēram, slaidrādes. Šie risinājumi piedāvā labāku atmiņas pārvaldību un novērš problēmas, kas saistītas ar rekursīviem funkciju izsaukumiem, nodrošinot stabilitāti ilgstošos procesos.