Éviter la récursivité dans la fonction de diaporama JavaScript avec des promesses

Modification de la fonction JavaScript récursive pour éviter le débordement de la pile d'appels

JavaScript - Approche basée sur des promesses avec une boucle d'intervalle pour éviter la récursion

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

Utiliser JavaScript asynchrone sans récursion

JavaScript - Solution utilisant une boucle avec Promises et évitant 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);
  }
}

Questions courantes sur la façon d'éviter la récursion dans le diaporama JavaScript

1. Qu'est-ce que la récursivité en JavaScript et pourquoi est-ce un problème dans les diaporamas ?
2. La récursivité se produit lorsqu'une fonction s'appelle elle-même, et si elle est effectuée en continu, elle peut entraîner un débordement de pile. Dans un diaporama, cela entraînerait une utilisation excessive de la mémoire et pourrait potentiellement faire planter le navigateur.
3. Comment puis-je éviter la récursivité dans une fonction JavaScript ?
4. Une solution consiste à utiliser setInterval ou setTimeout pour planifier des tâches sans récursion. Une autre option est le modèle basé sur les événements, dans lequel les fonctions sont déclenchées par des événements spécifiques d'utilisateur ou de navigateur.
5. Pourquoi ma tentative d'utilisation while(true) bloquer le navigateur ?
6. En utilisant while(true) sans opération asynchrone comme await ou setTimeout s'exécute dans une boucle continue sans pause, ce qui bloque le thread principal, provoquant le blocage du navigateur.
7. Puis-je utiliser Promises pour éviter la récursion ?
8. Oui, Promises permettre une exécution asynchrone sans appels de fonction récursifs. Cela garantit que chaque opération se termine avant le démarrage de la suivante, empêchant ainsi le débordement de pile.
9. Qu'est-ce que requestAnimationFrame et en quoi ça aide ?
10. requestAnimationFrame est une méthode qui vous permet de créer des animations fluides et synchronisées avec le taux de rafraîchissement du navigateur. C’est efficace et évite les calculs inutiles lorsque l’onglet du navigateur est inactif.

Éviter la récursivité pour les boucles continues

Éviter la récursion dans les fonctions JavaScript, en particulier lors de l'utilisation Promesses, est essentiel au maintien des performances. En passant à une approche basée sur des boucles ou à un modèle basé sur les événements, les développeurs peuvent empêcher la pile d'appels de croître sans fin et éviter les plantages du navigateur.

En utilisant des méthodes comme définirIntervalle ou requêteAnimationFrame, ainsi que la gestion efficace des opérations asynchrones, permettront une exécution fluide de tâches telles que les diaporamas. Ces solutions offrent une meilleure gestion de la mémoire et évitent les problèmes associés aux appels de fonctions récursifs, garantissant ainsi la stabilité des processus de longue durée.