Asynchronní načítání obrázků v cyklu v JavaScriptu

Nechť cesty k obrázkům jsou uloženy v poli:

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

Můžeme načíst tyto obrázky v cyklu:

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

Kód vypadá hezky a bez callback hell, avšak vrátili jsme se k našim dvěma problémům: pořadí obrázků není zaručeno a není možné zachytit moment načtení všech obrázků.

A v této situaci neexistuje řešení: nelze spustit cyklus, použít uvnitř něj asynchronní funkci a poté zachytit moment dokončení všech funkcí cyklu. Buď vám není třeba zachytit tento moment a výše uvedený kód vám bude vyhovovat, anebo vítejte v callback hell.

Ale netřeba zoufat - řešení problému je možné pomocí promises, které budeme studovat v následujících lekcích.