Memuat Gambar Secara Asinkron dalam Loop di JavaScript
Misalkan path ke gambar disimpan dalam array:
let arr = ['img1.png', 'img2.png', 'img3.png'];
Kita dapat memuat gambar-gambar ini dalam sebuah loop:
for (let path of arr) {
loadImage(path, function(image, err) {
document.body.append(image);
});
}
Kodenya menjadi bagus dan tanpa callback hell, namun, kita kembali ke dua masalah kita: urutan gambar tidak dijamin dan tidak mungkin untuk menangkap momen semua gambar selesai dimuat.
Dan tidak ada solusi dalam situasi ini: tidak mungkin untuk menjalankan loop, menggunakan fungsi asinkron di dalamnya, dan kemudian menangkap momen selesainya semua fungsi dalam loop. Entah Anda tidak perlu menangkap momen itu dan kode di atas cocok untuk Anda, atau selamat datang di callback hell.
Tapi, jangan kecewa - solusi untuk masalah ini mungkin melalui promise, yang akan kita pelajari dalam pelajaran berikutnya.
