Unikanie rekurencji w funkcji pokazu slajdów JavaScript z obietnicami

Modyfikowanie rekurencyjnej funkcji JavaScript w celu uniknięcia przepełnienia stosu wywołań

JavaScript — podejście oparte na obietnicach z pętlą interwałową w celu uniknięcia rekurencji

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

Używanie asynchronicznego JavaScriptu bez rekurencji

JavaScript — rozwiązanie wykorzystujące pętlę z obietnicami i unikające 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);
  }
}

Często zadawane pytania dotyczące unikania rekurencji w pokazie slajdów JavaScript

1. Co to jest rekurencja w JavaScript i dlaczego stanowi problem w pokazach slajdów?
2. Rekurencja ma miejsce, gdy funkcja wywołuje samą siebie, a jeśli jest wykonywana w sposób ciągły, może prowadzić do przepełnienia stosu. W przypadku pokazu slajdów spowodowałoby to nadmierne użycie pamięci i potencjalnie spowodowałoby awarię przeglądarki.
3. Jak mogę uniknąć rekurencji w funkcji JavaScript?
4. Jedno z rozwiązań wykorzystuje setInterval Lub setTimeout planować zadania bez rekurencji. Inną opcją jest model sterowany zdarzeniami, w którym funkcje są uruchamiane przez określone zdarzenia użytkownika lub przeglądarki.
5. Dlaczego moja próba użycia while(true) zablokować przeglądarkę?
6. Używanie while(true) bez operacji asynchronicznej, takiej jak await Lub setTimeout działa w ciągłej pętli bez przerwy, co blokuje główny wątek, powodując zawieszenie przeglądarki.
7. Czy mogę użyć Promises aby uniknąć rekurencji?
8. Tak, Promises umożliwiają asynchroniczne wykonywanie bez rekurencyjnych wywołań funkcji. Dzięki temu każda operacja zakończy się przed rozpoczęciem następnej, co zapobiega przepełnieniu stosu.
9. Co jest requestAnimationFrame i jak to pomaga?
10. requestAnimationFrame to metoda pozwalająca na tworzenie płynnych animacji zsynchronizowanych z częstotliwością odświeżania przeglądarki. Jest wydajny i zapobiega niepotrzebnym obliczeniom, gdy karta przeglądarki jest nieaktywna.

Unikanie rekurencji w przypadku pętli ciągłych

Unikanie rekurencji w funkcjach JavaScript, szczególnie podczas używania Obietnice, ma kluczowe znaczenie dla utrzymania wydajności. Przełączając się na podejście oparte na pętli lub model oparty na zdarzeniach, programiści mogą zapobiec nieskończonemu wzrostowi stosu wywołań i uniknąć awarii przeglądarki.

Używanie metod takich jak ustawinterwał Lub żądanie ramki animacji, a także skutecznie obsługiwać operacje asynchroniczne, pozwoli na płynną realizację zadań takich jak pokazy slajdów. Rozwiązania te oferują lepsze zarządzanie pamięcią i zapobiegają problemom związanym z rekursywnymi wywołaniami funkcji, zapewniając stabilność w długotrwałych procesach.