Callback hell problēma JavaScript

Pieņemsim, ka mēs vēlamies izmantot funkciju loadImage, lai ielādētu trīs attēlus:

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

Ar šo kodu kaut kas nav kārtībā. Lieta ir tāda, ka attēli tiks pievienoti body pēc to ielādes secības. Tas nozīmē, ka neviens mums negarantē, ka attēli tiks pievienoti tieši tādā secībā, kādā mums tas nepieciešams.

Ir vēl kaut kas. Pieņemsim, ka mēs vēlamies izdarīt kaut ko, kad visi trīs attēli būs ielādēti. Mūsu kodā mēs vienkārši nevarēsim noķert šo brīdi, jo visi trīs attēli tiek ielādēti neatkarīgi.

Labi, pārveidosim kodu:

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('visi attēli ielādēti');
		});
	});
});

Mēs atrisinājām abas aprakstītās problēmas. Tomēr, samainījām tās pret citu. Pagaidām tā vēl nav īsti redzama, bet iedomājieties, kā izskatīsies mūsu kods, ja tajā būs nevis trīs, bet, teiksim, desmit attēlu ielāde, plus tiks pievienota izņēmumu apstrāde. Rezultātā kods kļūs ārkārtīgi nelasāms: koda sarežģītība avalanšveidīgi pieaug, ligzdot atbalsta funkcijas vienu otrā. Šādu situāciju sauc par callback hell - atbalsta funkciju elle.

Pārrakstiet doto kodu tā, lai tajā būtu 10 attēlu ielāde plus izņēmumu apstrāde. Pārliecinieties, ka jums izveidojas callback hell situācija.