Vaatlerle JavaScript Slayt Gösterisi İşlevinde Yinelemelerden Kaçınma

Çağrı Yığını Taşmasını Önlemek İçin Özyinelemeli JavaScript İşlevini Değiştirme

JavaScript - Yinelemeyi önlemek için aralık döngüsüne sahip söze dayalı yaklaşım

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

Özyineleme Olmadan Eşzamansız JavaScript Kullanma

JavaScript - Promises içeren bir döngü kullanan ve setInterval'dan kaçınan çözüm

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 Slayt Gösterisinde Özyinelemeyi Önlemeye İlişkin Sık Sorulan Sorular

1. JavaScript'te özyineleme nedir ve slayt gösterilerinde neden bir sorundur?
2. Özyineleme, bir işlev kendisini çağırdığında meydana gelir ve sürekli olarak yapılırsa yığın taşmasına neden olabilir. Bir slayt gösterisinde bu, aşırı bellek kullanımına neden olur ve tarayıcının çökmesine neden olabilir.
3. Bir JavaScript işlevinde yinelemeyi nasıl önleyebilirim?
4. Bir çözüm kullanıyor setInterval veya setTimeout görevleri yineleme olmadan zamanlamak için. Diğer bir seçenek ise işlevlerin belirli kullanıcı veya tarayıcı olayları tarafından tetiklendiği olay odaklı modeldir.
5. Neden kullanmaya çalıştım? while(true) tarayıcıyı kilitle?
6. Kullanma while(true) gibi eşzamansız bir işlem olmadan await veya setTimeout duraklamadan sürekli bir döngüde çalışır, bu da ana iş parçacığını bloke ederek tarayıcının donmasına neden olur.
7. Kullanabilir miyim Promises yinelemeyi önlemek için?
8. Evet, Promises özyinelemeli işlev çağrıları olmadan eşzamansız yürütmeye izin verir. Bu, her işlemin bir sonraki başlamadan önce tamamlanmasını sağlayarak yığın taşmasını önler.
9. Nedir requestAnimationFrame ve nasıl yardımcı oluyor?
10. requestAnimationFrame tarayıcının yenileme hızıyla senkronize edilmiş akıcı animasyonlar oluşturmanıza olanak sağlayan bir yöntemdir. Verimlidir ve tarayıcı sekmesi etkin olmadığında gereksiz hesaplamaları önler.

Sürekli Döngüler İçin Yinelemelerden Kaçınılması

Özellikle JavaScript işlevlerini kullanırken yinelemeden kaçınmak Vaatlerperformansı korumak için kritik öneme sahiptir. Geliştiriciler, döngü tabanlı bir yaklaşıma veya olay odaklı bir modele geçerek çağrı yığınının sonsuza kadar büyümesini önleyebilir ve tarayıcı çökmelerini önleyebilir.

Gibi yöntemleri kullanmak setInterval veya istekAnimasyon ÇerçevesiEşzamansız işlemleri etkili bir şekilde yönetmenin yanı sıra, slayt gösterileri gibi görevlerin sorunsuz bir şekilde yürütülmesine de olanak tanır. Bu çözümler daha iyi bellek yönetimi sunarak özyinelemeli işlev çağrılarıyla ilişkili sorunları önleyerek uzun süren işlemlerde istikrar sağlar.