Asynchroon laden van afbeeldingen in een lus in JavaScript
Stel dat de paden naar de afbeeldingen in een array zijn opgeslagen:
let arr = ['img1.png', 'img2.png', 'img3.png'];
We kunnen deze afbeeldingen in een lus laden:
for (let path of arr) {
loadImage(path, function(image, err) {
document.body.append(image);
});
}
De code ziet er mooi uit en zonder callback hell, maar we zijn teruggekeerd naar onze twee problemen: de volgorde van de afbeeldingen is niet gegarandeerd en het is onmogelijk om het moment te vangen waarop alle afbeeldingen zijn geladen.
En er is geen oplossing in deze situatie: het is onmogelijk om een lus te starten, erin een asynchrone functie te gebruiken, en dan het moment te vangen waarop alle functies van de lus zijn voltooid. Ofwel heb je dat moment niet nodig en is de bovenstaande code geschikt voor je, ofwel welkom in callback hell.
Maar wees niet ontmoedigd - een oplossing voor het probleem is mogelijk via promises, die we in de volgende lessen zullen bestuderen.
