Vermeiden von Rekursionen in der JavaScript-Diashow-Funktion mit Versprechen

Ändern der rekursiven JavaScript-Funktion, um einen Aufrufstapelüberlauf zu vermeiden

JavaScript – Promise-basierter Ansatz mit einer Intervallschleife zur Vermeidung von Rekursionen

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

Verwendung von asynchronem JavaScript ohne Rekursion

JavaScript – Lösung, die eine Schleife mit Promises verwendet und setInterval vermeidet

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

Häufige Fragen zur Vermeidung von Rekursionen in einer JavaScript-Diashow

1. Was ist Rekursion in JavaScript und warum ist sie in Diashows ein Problem?
2. Eine Rekursion tritt auf, wenn sich eine Funktion selbst aufruft, und wenn sie kontinuierlich durchgeführt wird, kann sie zu einem Stapelüberlauf führen. In einer Diashow würde dies zu einer übermäßigen Speichernutzung führen und möglicherweise zum Absturz des Browsers führen.
3. Wie kann ich eine Rekursion in einer JavaScript-Funktion vermeiden?
4. Eine Lösung ist die Verwendung setInterval oder setTimeout um Aufgaben ohne Rekursion zu planen. Eine weitere Option ist das ereignisgesteuerte Modell, bei dem Funktionen durch bestimmte Benutzer- oder Browserereignisse ausgelöst werden.
5. Warum habe ich versucht, es zu verwenden? while(true) Den Browser sperren?
6. Benutzen while(true) ohne eine asynchrone Operation wie await oder setTimeout läuft in einer Endlosschleife ohne Pause, wodurch der Hauptthread blockiert wird und der Browser einfriert.
7. Kann ich verwenden Promises um eine Rekursion zu vermeiden?
8. Ja, Promises ermöglichen eine asynchrone Ausführung ohne rekursive Funktionsaufrufe. Dadurch wird sichergestellt, dass jeder Vorgang abgeschlossen wird, bevor der nächste beginnt, wodurch ein Stapelüberlauf verhindert wird.
9. Was ist requestAnimationFrame und wie hilft es?
10. requestAnimationFrame ist eine Methode, mit der Sie flüssige Animationen erstellen können, die mit der Aktualisierungsrate des Browsers synchronisiert sind. Es ist effizient und verhindert unnötige Berechnungen, wenn die Browser-Registerkarte inaktiv ist.

Rekursion für kontinuierliche Schleifen vermeiden

Vermeidung von Rekursionen in JavaScript-Funktionen, insbesondere bei der Verwendung Versprechenist entscheidend für die Aufrechterhaltung der Leistung. Durch den Wechsel zu einem schleifenbasierten Ansatz oder einem ereignisgesteuerten Modell können Entwickler verhindern, dass der Aufrufstapel endlos wächst, und Browserabstürze vermeiden.

Mit Methoden wie setInterval oder requestAnimationFrameNeben der effektiven Handhabung asynchroner Vorgänge ermöglicht es auch die reibungslose Ausführung von Aufgaben wie Diashows. Diese Lösungen bieten eine bessere Speicherverwaltung, verhindern Probleme im Zusammenhang mit rekursiven Funktionsaufrufen und sorgen so für Stabilität bei lang laufenden Prozessen.