JavaScript-daky callback hell meselesi

Funkisiýa loadImage kömegi bilen üç surat ýüklemek isleýändigimizi göz öňüne getireliň:

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 kod bilen bir zat nädogry. Mysal ýaly, suratlar ýüklenmegiň yzy bilen body-a goşular. Şonuň üçin, suratlaryň bize gerekli tertipde goşularlygy hakynda hiç kim bize kepil berip bilmez.

Başga bir zat hem bar. Diňe üç surat hem ýüklensinden soň bir zat etmek isleýändigimizi göz öňüne getireliň. Bizim kodymyzda bu wagtly düşüp bilmeris, sebäbi üç surat hem bagly däl bir şekilde ýüklenýär.

Bolýar, kody üýtgedeliň:

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('hemme suratlar ýüklendi');
		});
	});
});

Biz beýany edilen iki meseleni hem çözdik. Şonda-da, ýerine başga birini aldyk. Heniz oňa güýçli görünmese-de, kodymyzda üç däl, aýdyň, on suratyň ýüklenmegi we goşmaça ýalňyşlyklaryň işlenişi goşulandan soň onuň nähili görünerdigini göz öňüne getiriň. Netijede kod gaty okalmaýar hala gelýär: kodynyň çylşyrymlylygy callback-leriň iç-içe geçmegi bilen güýçli derejede artýar. Bu ýagdaý callback hell - callback jähennemi diýilýär.

Görkezilen kody, içinde 10 suratyň ýüklenmegi we ýalňyşlyklaryň işlenişi boljak şekilde ýazyp görüň. Callback hell ýagdaýynyň ýüze çykýandygyna göz ýetiriň.