Menghindari Rekursi dalam Fungsi Slideshow JavaScript dengan Janji

Memodifikasi Fungsi JavaScript Rekursif untuk Menghindari Call Stack Overflow

JavaScript - Pendekatan berbasis janji dengan loop interval untuk menghindari rekursi

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 Asinkron tanpa Rekursi

JavaScript - Solusi menggunakan loop dengan Promises dan menghindari 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);
  }
}

Pertanyaan Umum tentang Menghindari Rekursi di Slideshow JavaScript

1. Apa itu rekursi dalam JavaScript dan mengapa ini menjadi masalah dalam tayangan slide?
2. Rekursi terjadi ketika suatu fungsi memanggil dirinya sendiri, dan jika dilakukan terus menerus, hal ini dapat menyebabkan stack overflow. Dalam tayangan slide, hal ini akan menyebabkan penggunaan memori berlebihan dan berpotensi membuat browser mogok.
3. Bagaimana cara menghindari rekursi dalam fungsi JavaScript?
4. Salah satu solusinya adalah dengan menggunakan setInterval atau setTimeout untuk menjadwalkan tugas tanpa rekursi. Pilihan lainnya adalah model berbasis peristiwa, di mana fungsi dipicu oleh peristiwa pengguna atau browser tertentu.
5. Mengapa upaya saya untuk menggunakan while(true) mengunci browser?
6. Menggunakan while(true) tanpa operasi asinkron seperti await atau setTimeout berjalan dalam loop terus menerus tanpa jeda, yang memblokir thread utama, menyebabkan browser terhenti.
7. Dapatkah saya menggunakan Promises untuk menghindari rekursi?
8. Ya, Promises memungkinkan eksekusi asinkron tanpa pemanggilan fungsi rekursif. Hal ini memastikan setiap operasi selesai sebelum operasi berikutnya dimulai, mencegah stack overflow.
9. Apa requestAnimationFrame dan apa manfaatnya?
10. requestAnimationFrame adalah metode yang memungkinkan Anda membuat animasi halus yang disinkronkan dengan kecepatan refresh browser. Ini efisien dan mencegah penghitungan yang tidak perlu saat tab browser tidak aktif.

Menghindari Rekursi untuk Perulangan Berkelanjutan

Menghindari rekursi dalam fungsi JavaScript, khususnya saat menggunakan Janji, sangat penting untuk mempertahankan kinerja. Dengan beralih ke pendekatan berbasis loop atau model berbasis peristiwa, pengembang dapat mencegah tumpukan panggilan bertambah tanpa henti dan menghindari kerusakan browser.

Menggunakan metode seperti setInterval atau permintaanAnimationFrame, serta menangani operasi asinkron secara efektif, akan memungkinkan kelancaran pelaksanaan tugas seperti tayangan slide. Solusi ini menawarkan manajemen memori yang lebih baik dan mencegah masalah yang terkait dengan pemanggilan fungsi rekursif, sehingga memastikan stabilitas dalam proses yang berjalan lama.