Masalah Callback Hell dalam JavaScript

Misalkan kita ingin memuat tiga gambar menggunakan fungsi loadImage:

loadImage('img1.png', function(image, err) {
	document.body.append(image);
});
loadImage('img2.png', function(image, err) {
	document.body.append(image);
});
loadImage('img3.png', function(image, err) {
	document.body.append(image);
});

Ada yang salah dengan kode ini. Masalahnya adalah gambar akan ditambahkan ke body seiring mereka dimuat. Artinya, tidak ada yang menjamin kita bahwa gambar akan ditambahkan tepat dalam urutan yang kita inginkan.

Ada hal lain lagi. Misalkan kita ingin melakukan sesuatu setelah ketiga gambar selesai dimuat. Dalam kode kita, kita tidak bisa menangkap momen ini, karena ketiga gambar dimuat secara independen.

Oke, mari ubah kodenya:

loadImage('img1.png', function(image1, err1) {
	document.body.append(image1);
	
	loadImage('img2.png', function(image2, err2) {
		document.body.append(image2);
		
		loadImage('img3.png', function(image3, err3) {
			document.body.append(image3);
			console.log('semua gambar telah dimuat');
		});
	});
});

Kita telah menyelesaikan kedua masalah yang dijelaskan. Namun, sebagai gantinya kita mendapatkan masalah lain. Masalahnya belum terlalu terlihat, tetapi bayangkan bagaimana tampilan kode kita jika di dalamnya tidak hanya memuat tiga, tapi, katakanlah, sepuluh gambar, ditambah lagi penanganan pengecualian. Alhasil, kodenya akan menjadi sangat tidak terbaca: kompleksitas kode meningkat secara drastis ketika callback bersarang satu sama lain. Situasi seperti ini disebut callback hell - neraka callback.

Tulis ulang kode yang diberikan sehingga di dalamnya terdapat pemuatan 10 gambar ditambah penanganan pengecualian. Pastikan Anda mendapatkan situasi callback hell.