Mengelakkan Rekursi dalam Fungsi Tayangan Slaid JavaScript dengan Janji

Mengubah suai Fungsi JavaScript Rekursif untuk Mengelakkan Limpahan Tindanan Panggilan

JavaScript - Pendekatan berasaskan janji dengan gelung selang untuk mengelakkan pengulangan

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

Menggunakan JavaScript Asynchronous tanpa Rekursi

JavaScript - Penyelesaian menggunakan gelung dengan Janji dan mengelakkan 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);
  }
}

Soalan Lazim tentang Mengelakkan Rekursi dalam Tayangan Slaid JavaScript

1. Apakah rekursi dalam JavaScript dan mengapa ia menjadi masalah dalam tayangan slaid?
2. Rekursi berlaku apabila fungsi memanggil dirinya sendiri, dan jika dilakukan secara berterusan, ia boleh menyebabkan limpahan tindanan. Dalam tayangan slaid, ini akan menyebabkan penggunaan memori yang berlebihan dan berpotensi merosakkan penyemak imbas.
3. Bagaimanakah saya boleh mengelakkan pengulangan dalam fungsi JavaScript?
4. Satu penyelesaian adalah menggunakan setInterval atau setTimeout untuk menjadualkan tugas tanpa ulangan. Pilihan lain ialah model dipacu peristiwa, di mana fungsi dicetuskan oleh peristiwa pengguna atau penyemak imbas tertentu.
5. Mengapa saya cuba menggunakan while(true) kunci pelayar?
6. menggunakan while(true) tanpa operasi tak segerak seperti await atau setTimeout berjalan dalam gelung berterusan tanpa berhenti, yang menyekat utas utama, menyebabkan penyemak imbas menjadi beku.
7. Boleh saya guna Promises untuk mengelakkan berulang?
8. ya, Promises benarkan pelaksanaan tak segerak tanpa panggilan fungsi rekursif. Ini memastikan setiap operasi selesai sebelum operasi seterusnya bermula, menghalang limpahan tindanan.
9. Apa itu requestAnimationFrame dan bagaimana ia membantu?
10. requestAnimationFrame ialah kaedah yang membolehkan anda mencipta animasi lancar yang disegerakkan dengan kadar penyegaran penyemak imbas. Ia cekap dan menghalang pengiraan yang tidak perlu apabila tab penyemak imbas tidak aktif.

Mengelakkan Rekursi untuk Gelung Berterusan

Mengelakkan pengulangan dalam fungsi JavaScript, terutamanya apabila menggunakan Janji, adalah penting untuk mengekalkan prestasi. Dengan beralih kepada pendekatan berasaskan gelung atau model dipacu peristiwa, pembangun boleh menghalang timbunan panggilan daripada berkembang tanpa henti dan mengelakkan ranap penyemak imbas.

Menggunakan kaedah seperti setInterval atau requestAnimationFrame, serta mengendalikan operasi tak segerak dengan berkesan, akan membolehkan pelaksanaan tugas yang lancar seperti tayangan slaid. Penyelesaian ini menawarkan pengurusan memori yang lebih baik dan menghalang isu yang berkaitan dengan panggilan fungsi rekursif, memastikan kestabilan dalam proses yang berjalan lama.