Асинхроно учитавање слика у петљи у 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.

Али, не треба се устручавати - решење проблема је могуће преко промиса, које ћемо учити у наредним лекцијама.