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 hell - коллбектер тозағы деп аталады.

Келтірілген кодты он суретті жүктеу плюс ерекше жағдайларды өңдеу бар етіп қайта жазыңыз. Өзіңізге сендіріңіз, сізде callback hell жағдайы пайда болады.