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

Бул код менен бир нерсе туура эмес. Маселе, сүрөттөр 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 функциялардын ичилөөсү менен коддун татаалдыгы кар сыяктуу өсөт. Мындай абал callback hell - callback тозогу деп аталат.

Келтирилген кодду кайра жазыңыз, анда 10 сүрөт жүктөлсүн жана кошумча исключениелерди иштетүү болсун. Өзүңүздүн callback hell абалына жолукканыңызга ишениңиз.