Как избежать рекурсии в функции слайд-шоу JavaScript с помощью обещаний

Изменение рекурсивной функции JavaScript, чтобы избежать переполнения стека вызовов

JavaScript — подход на основе обещаний с интервальным циклом, позволяющий избежать рекурсии.

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

Использование асинхронного JavaScript без рекурсии

JavaScript – решение с использованием цикла с обещаниями и обходом 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);
  }
}

Общие вопросы по предотвращению рекурсии в слайд-шоу JavaScript

1. Что такое рекурсия в JavaScript и почему она является проблемой в слайд-шоу?
2. Рекурсия возникает, когда функция вызывает сама себя, и если она выполняется постоянно, это может привести к переполнению стека. В слайд-шоу это может привести к чрезмерному использованию памяти и потенциальному сбою браузера.
3. Как избежать рекурсии в функции JavaScript?
4. Одним из решений является использование setInterval или setTimeout планировать задачи без рекурсии. Другой вариант — модель, управляемая событиями, в которой функции запускаются определенными событиями пользователя или браузера.
5. Почему моя попытка использовать while(true) заблокировать браузер?
6. С использованием while(true) без асинхронной операции типа await или setTimeout выполняется в непрерывном цикле без пауз, что блокирует основной поток и приводит к зависанию браузера.
7. Могу ли я использовать Promises чтобы избежать рекурсии?
8. Да, Promises разрешить асинхронное выполнение без рекурсивных вызовов функций. Это гарантирует, что каждая операция завершится до начала следующей, предотвращая переполнение стека.
9. Что такое requestAnimationFrame и как это поможет?
10. requestAnimationFrame — это метод, позволяющий создавать плавную анимацию, синхронизированную с частотой обновления браузера. Это эффективно и предотвращает ненужные вычисления, когда вкладка браузера неактивна.

Как избежать рекурсии для непрерывных циклов

Избегание рекурсии в функциях JavaScript, особенно при использовании Обещания, имеет решающее значение для поддержания производительности. Переключившись на циклический подход или модель, управляемую событиями, разработчики могут предотвратить бесконечный рост стека вызовов и избежать сбоев браузера.

Используя такие методы, как setInterval или запросАнимацияFrame, а также эффективная обработка асинхронных операций позволит плавно выполнять такие задачи, как слайд-шоу. Эти решения обеспечивают лучшее управление памятью и предотвращают проблемы, связанные с рекурсивными вызовами функций, обеспечивая стабильность в длительных процессах.