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:
let arr = ['img1.png', 'img2.png', 'img3.png'];
Ezeket a képeket betölthetjük egy ciklusban:
for (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.