Уникнення рекурсії у функції слайд-шоу JavaScript із обіцянками

Змінення рекурсивної функції JavaScript, щоб уникнути переповнення стека викликів

JavaScript – підхід на основі Promise з інтервальним циклом, щоб уникнути рекурсії

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 – рішення, що використовує цикл із Promises і уникає 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 або requestAnimationFrame, а також ефективна обробка асинхронних операцій дозволить плавно виконувати такі завдання, як слайд-шоу. Ці рішення пропонують краще керування пам’яттю та запобігають проблемам, пов’язаним із рекурсивними викликами функцій, забезпечуючи стабільність довготривалих процесів.