JavaScriptдаги callback hell муаммоси

Фароз қилайлик, биз 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);
});

Ушбу код билан бир нарса нотўғри. Гap шундаки, расмлар юкланган сари bodyга қўшилади. Яъни бизга расмлар айнан биз хохлаган тартибда қўшилишини ҳеч ким кафолатлай олмайди.

Яна бир нарса бор. Фароз қилайлик, биз учта расм ҳам юкланганда бирор иш қилмоқчимиз. Бизнинг кодимизда биз бу лаҳзани ушлаб ололмаймиз, чунки барча учта расм мустақил равишда юкланади.

Хўш, кодни қайтадан ёзайлик:

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('барча расмлар юкланди');
		});
	});
});

Биз тавсифланган иккита муаммони ҳал қилдик. Аммо, бунинг ўрнига бошқасини олдик. Ҳозирча у ҳануз кучли кўринмайди, лекин ўзингизча тасаввур қилинг, агар бизда учта эмас, балки, айтайлик, ўнта расмни юклаш бўлса ва истисноларни қайта ишлаш қўшилса, бизнинг кодим қандай кўринади. Натижада код жуда ўқиш мураккаб бўлиб қолади: Коднинг мураккаблиги коллбэкларнинг ички-ичкида бўлиши билан довдирабош ҳосил қилади. Бундай вазият callback hell - коллбэклар жаҳаннами дейилади.

Келтирилган кодни қайта ёзинг, унда 10 та расмни юклаш ва истисноларни қайта ишлаш бўлсин. Сизда callback hell вазият ҳосил бўлишига ишонч ҳосил қилинг.