Асинхронная загрузка картинок в цикле в JavaScript

Бигзор роҳҳо ба тасвирҳо дар массив нигоҳ дошта шаванд:

let arr = ['img1.png', 'img2.png', 'img3.png'];

Мо метавонем ин тасвирҳоро дар ҳалқа бор кунем:

for (let path of arr) {
	loadImage(path, function(image, err) {
		document.body.append(image);
	});
}

Код хуб ва бе callback hell шуд, аммо, мо ба ду мушкилоти худ баргаштем: тартиби тасвирҳо кафолат дода намешавад ва имкон надорад лаҳзаи боркунии ҳамаи тасвирҳоро гирифт.

Ва дар ин вазъ ҳеҷ ҳалли вуҷуд надорад: имконнопазир аст ҳалқаро оғоз кард, дар дохили он истифода бурд функсияи асинхронро, ва сипас лаҳзаи ба охир расидани ҳамаи функсияҳои ҳалқаро гирифт. Ё шумо ба ин лаҳза ниёз надоред ва коди боло овардашуда ба шумо мувофиқ аст ё хуш омадед ба callback hell.

Аммо, ноумед шудан лозим нест - ҳалли мушкилот имконпазир аст тавассути ваъдаҳо (promises), ки мо дар дарсҳои оянда меомӯзем.