Asynkron lasting av bilder i loop i JavaScript
La stiene til bildene lagres i en array:
let arr = ['img1.png', 'img2.png', 'img3.png'];
Vi kan laste disse bildene i en loop:
for (let path of arr) {
loadImage(path, function(image, err) {
document.body.append(image);
});
}
Koden ble fin og uten callback hell, men vi har returnert til våre to problemer: rekkefølgen på bildene er ikke garantert og det er umulig å fange øyeblikket når alle bildene er lastet.
Og det finnes ingen løsning i denne situasjonen: det er umulig å starte en loop, bruke en asynkron funksjon inni den, og deretter fange øyeblikket når alle funksjonene i loopen er ferdige. Enten trenger du ikke å fange dette øyeblikket og koden ovenfor passer for deg, eller velkommen til callback hell.
Men du trenger ikke å bli fortvilet - en løsning på problemet er mulig gjennom promises, som vi skal lære om i de neste leksjonene.
