Asynchrónne načítanie obrázkov v cykle v JavaScripte

Nech cesty k obrázkom sú uložené v poli:

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

Tieto obrázky môžeme načítať v cykle:

javascriptfor (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.