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 - კოლბექების ჯოჯოხეთი.

გადაწერეთ მოყვანილი კოდი ისე, რომ მასში იყოს 10 სურათის ჩატვირთვა პლუს გამონაკლისების დამუშავება. დარწმუნდით, რომ თქვენ გაქვთ სიტუაცია callback hell.