Képek aszinkron betöltése ciklusban JavaScriptben

Tegyük fel, hogy a képek elérési útjai egy tömbben vannak tárolva:

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

Ezeket a képeket betölthetjük egy ciklusban:

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

A kód szép lett és nincs callback hell, azonban visszatértünk két problémánkhoz: a képek sorrendje nem garantált, és lehetetlen megfogni az összes kép betöltésének pillanatát.

És ebben a helyzetben nincs megoldás: lehetetlen elindítani egy ciklust, aszinkron függvényt használni benne, majd megfogni a ciklus összes függvényének befejeződésének pillanatát. Vagy nincs szükséged erre a pillanatra, és a fenti kód megfelel neked, vagy üdvözöllek a callback hell-ben.

De nem szabad csüggedni - a probléma megoldása lehetőséges a promise-okon keresztül, amelyeket a következő leckékben fogunk tanulmányozni.