JavaScript-da callback hell muammosi

Faraz qilaylik, biz loadImage funktsiyasi yordamida uchta rasmni yuklamoqchimiz:

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);
});

Ushbu kodda bir muammo bor. Masala shundaki, rasmlar body-ga yuklanishi bilan qo'shiladi. Ya'ni hech kim bizga rasmlar aynan biz xohlagan tartibda qo'shilishini kafolatlamaydi.

Yana bir narsa bor. Faraz qilaylik, biz uchala rasm ham yuklanganidan keyin biron bir ishni bajarishni xohlaymiz. Bizning kodimizda biz bu paytni ushlay olmaymiz, chunki barcha uchta rasm mustaqil ravishda yuklanadi.

OK, kodni qayta yozamiz:

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('barcha rasmlar yuklandi');
		});
	});
});

Biz tavsiflangan ikkala muammoni ham hal qildik. Biroq, buning evaziga boshqasini oldik. Hozircha u hali ham kuchli ko'rinmayapti, lekin tasavvur qiling, agar kodimizda uchta emas, balki, aytaylik, o'n ta rasm yuklanishi va ustiga istisnolarni qayta ishlash qo'shilgan bo'lsa, kod qanday ko'rinadi. Natijada kod juda o'qilmaydigan holga keladi: callback-larning ichma-ichligida kod murakkabligi lavina tarzda o'sib boradi. Bunday vaziyat callback hell - callback do'zaxi deb ataladi.

Keltirilgan kodni 10 ta rasm yuklanishi va istisnolarni qayta ishlash qo'shilgan holda qayta yozing. Sizda callback hell vaziyati paydo bo'lishiga ishonch hosil qiling.