Asynchrónne načítanie obrázkov v cykle v JavaScripte
Nech cesty k obrázkom sú uložené v poli:
let arr = ['img1.png', 'img2.png', 'img3.png'];
Tieto obrázky môžeme načítať v cykle:
for (let path of arr) {
loadImage(path, function(image, err) {
document.body.append(image);
});
}
Kód vyšiel pekný a bez callback hell, avšak vrátili sme sa k našim dvom problémom: poradie obrázkov nie je zaručené a nie je možné zachytiť moment načítania všetkých obrázkov.
A v tejto situácii neexistuje riešenie: nie je možné spustiť cyklus, použiť v ňom asynchrónnu funkciu, a potom zachytiť moment dokončenia všetkých funkcií cyklu. Buď nepotrebujete zachytiť tento moment a vyššie uvedený kód vám bude vyhovovať, alebo vitajte v callback hell.
Ale netreba sa trápiť - riešenie problému je možné cez promises, ktoré budeme študovať v nasledujúcich lekciách.