Muat Turun Gambar Asinkron dalam Gelung di JavaScript

Katakan laluan ke gambar disimpan dalam array:

let arr = ['img1.png', 'img2.png', 'img3.png'];

Kami boleh memuat turun gambar-gambar ini dalam gelung:

for (let path of arr) {
	loadImage(path, function(image, err) {
		document.body.append(image);
	});
}

Kod itu ternyata cantik dan tanpa callback hell, namun, kami kembali kepada dua masalah kami: urutan gambar tidak dijamin dan mustahil untuk menangkap saat semua gambar selesai dimuat turun.

Dan tiada penyelesaian dalam situasi ini: mustahil untuk menjalankan gelung, menggunakan fungsi asinkron di dalamnya, dan kemudian menangkap saat kesemua fungsi gelung selesai. Sama ada anda tidak perlu menangkap saat itu dan kod di atas sesuai untuk anda ataupun selamat datang ke callback hell.

Namun, jangan kecewa - penyelesaian kepada masalah adalah mungkin melalui janji (promises), yang akan kami pelajari dalam pelajaran seterusnya.