JavaScript-də callback hell problemi

Təsəvvür edək ki, biz loadImage funksiyası vasitəsilə üç şəkil yükləmək istəyirik:

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

Bu kodla bir problem var. Problem ondadır ki, şəkillər body-ə yükləndikləri kimi əlavə olunacaqlar. Yəni bizə heç kim zəmanət vermir ki, şəkillər məhz bizim istədiyimiz sıra ilə əlavə olunacaqlar.

Başqa bir şey də var. Təsəvvür edək ki, biz hər üç şəkil yükləndikdən sonra bir şey etmək istəyirik. Bizim kodda biz bu anı yaxalaya bilməyəcəyik, çünki hər üç şəkil müstəqil olaraq yüklənir.

Oldu, kodu dəyişək:

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('bütün şəkillər yükləndi');
		});
	});
});

Biz təsvir olunan hər iki problemi həll etdik. Lakin, bunun əvəzində başqa bir problem əldə etdik. Hələlik o, həddindən artıq görünmür, amma təsəvvür edin ki, kodumuzda üç yox, məsələn, on şəkil yüklənməsi olacaq, üstəlik istisnaların emalı da əlavə olunacaq. Nəticədə kod son dərəcə oxunaqsız olacaq: callback-lər bir-birinin içində olduqda kodun mürəkkəbliyi kütləvi şəkildə artır. Belə bir vəziyyət callback hell adlanır - callback cəhənnəmi.

Verilmiş kodu elə yenidən yazın ki, onda 10 şəklin yüklənməsi və üstəlik istisnaların emalı olsun. Əmin olun ki, callback hell vəziyyəti ilə qarşılaşırsınız.