Masalah Callback Hell dalam JavaScript

Katakan kita mahu memuat tiga imej 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 sesuatu yang tidak kena dengan kod ini. Masalahnya ialah imej-imej akan ditambahkan ke dalam body sejurus ia selesai dimuatkan. Ini bermakna tiada jaminan bahawa imej-imej akan ditambahkan dalam urutan yang kita kehendaki.

Ada satu lagi masalah. Katakan kita mahu melakukan something selepas ketiga-tiga imej selesai dimuatkan. Dalam kod kita, kita tidak boleh mengesan detik itu, kerana ketiga-tiga imej dimuatkan secara bebas.

Okey, mari ubah kodnya:

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 imej telah dimuatkan');
		});
	});
});

Kami telah menyelesaikan kedua-dua masalah yang dinyatakan. Namun, kami mendapat masalah lain sebagai gantinya. Masih belum begitu ketara, tetapi bayangkan bagaimana rupa kod kami jika ia memuatkan bukan tiga, tetapi, katakan, sepuluh imej, ditambah dengan pemprosesan pengecualian. Hasilnya, kod akan menjadi sangat sukar dibaca: kerumitan kod meningkat secara mendadak apabila callback bersarang. Keadaan ini dipanggil callback hell - neraka callback.

Tulis semula kod yang diberikan supaya ia memuatkan 10 imej ditambah dengan pemprosesan pengecualian. Pastikan anda menghasilkan situasi callback hell.