Callback hell-ի խնդիրը JavaScript-ում

Ենթադրենք՝ ուզում ենք 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 իրավիճակ։