Asynchronní načítání obrázků v cyklu v JavaScriptu
Nechť cesty k obrázkům jsou uloženy v poli:
let arr = ['img1.png', 'img2.png', 'img3.png'];
Můžeme načíst tyto obrázky v cyklu:
for (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.
