Evitando recursão na função de apresentação de slides JavaScript com promessas

Modificando a função JavaScript recursiva para evitar estouro de pilha de chamadas

JavaScript – Abordagem baseada em promessas com um loop de intervalo para evitar recursão

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

Usando JavaScript assíncrono sem recursão

JavaScript – Solução usando loop com Promises e evitando 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);
  }
}

Perguntas comuns sobre como evitar recursão em apresentação de slides JavaScript

1. O que é recursão em JavaScript e por que é um problema em apresentações de slides?
2. A recursão ocorre quando uma função chama a si mesma e, se feita continuamente, pode levar ao estouro de pilha. Em uma apresentação de slides, isso causaria uso excessivo de memória e poderia travar o navegador.
3. Como posso evitar a recursão em uma função JavaScript?
4. Uma solução é usar setInterval ou setTimeout para agendar tarefas sem recursão. Outra opção é o modelo orientado a eventos, onde as funções são acionadas por eventos específicos do usuário ou do navegador.
5. Por que minha tentativa de usar while(true) bloquear o navegador?
6. Usando while(true) sem uma operação assíncrona como await ou setTimeout é executado em um loop contínuo sem pausa, o que bloqueia o thread principal, fazendo com que o navegador congele.
7. Posso usar Promises para evitar recursão?
8. Sim, Promises permitir execução assíncrona sem chamadas de função recursivas. Isso garante que cada operação seja concluída antes do início da próxima, evitando o estouro da pilha.
9. O que é requestAnimationFrame e como isso ajuda?
10. requestAnimationFrame é um método que permite criar animações suaves e sincronizadas com a taxa de atualização do navegador. É eficiente e evita cálculos desnecessários quando a guia do navegador está inativa.

Evitando recursão para loops contínuos

Evitando recursão em funções JavaScript, principalmente ao usar Promessas, é fundamental para manter o desempenho. Ao mudar para uma abordagem baseada em loop ou modelo orientado a eventos, os desenvolvedores podem evitar que a pilha de chamadas cresça indefinidamente e evitar travamentos do navegador.

Usando métodos como setInterval ou requestAnimationFrame, além de lidar com operações assíncronas de maneira eficaz, permitirá a execução tranquila de tarefas como apresentações de slides. Essas soluções oferecem melhor gerenciamento de memória e evitam problemas associados a chamadas de funções recursivas, garantindo estabilidade em processos de longa execução.