Vyhýbání se rekurzi ve funkci prezentace JavaScript se sliby

Úprava rekurzivní funkce JavaScript, aby se zabránilo přetečení zásobníku hovorů

JavaScript – přístup založený na slibech s intervalovou smyčkou, aby se zabránilo rekurzi

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

Použití asynchronního JavaScriptu bez rekurze

JavaScript - Řešení pomocí smyčky s Promises a vyhýbání se 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);
  }
}

Běžné otázky o zamezení rekurze v JavaScriptové prezentaci

1. Co je rekurze v JavaScriptu a proč je to problém v prezentacích?
2. K rekurzi dochází, když funkce volá sama sebe, a pokud se provádí nepřetržitě, může to vést k přetečení zásobníku. V prezentaci by to způsobilo nadměrné využití paměti a potenciálně pád prohlížeče.
3. Jak se mohu vyhnout rekurzi ve funkci JavaScriptu?
4. Jedno řešení je použití setInterval nebo setTimeout k plánování úkolů bez rekurze. Další možností je model řízený událostmi, kde jsou funkce spouštěny konkrétními událostmi uživatele nebo prohlížeče.
5. Proč jsem se pokusil použít while(true) zamknout prohlížeč?
6. Použití while(true) bez asynchronní operace jako await nebo setTimeout běží v nepřetržité smyčce bez pauzy, což blokuje hlavní vlákno, což způsobí zamrznutí prohlížeče.
7. Mohu použít Promises vyhnout se rekurzi?
8. Ano, Promises umožňují asynchronní provádění bez rekurzivních volání funkcí. Tím je zajištěno, že každá operace bude dokončena před zahájením další, čímž se zabrání přetečení zásobníku.
9. co je requestAnimationFrame a jak to pomáhá?
10. requestAnimationFrame je metoda, která umožňuje vytvářet plynulé animace synchronizované s obnovovací frekvencí prohlížeče. Je to efektivní a zabraňuje zbytečným výpočtům, když je karta prohlížeče neaktivní.

Vyhnutí se rekurzi pro kontinuální smyčky

Vyhnutí se rekurzi ve funkcích JavaScriptu, zejména při použití Sliby, je rozhodující pro udržení výkonu. Přechodem na přístup založený na smyčce nebo model řízený událostmi mohou vývojáři zabránit nekonečnému růstu zásobníku volání a vyhnout se pádům prohlížeče.

Pomocí metod jako nastavitInterval nebo requestAnimationFrame, stejně jako efektivní zpracování asynchronních operací, umožní hladké provádění úloh, jako jsou prezentace. Tato řešení nabízejí lepší správu paměti a zabraňují problémům spojeným s rekurzivním voláním funkcí, čímž zajišťují stabilitu v dlouhotrvajících procesech.