Caricamento asincrono di immagini in un ciclo in JavaScript
Supponiamo che i percorsi delle immagini siano memorizzati in un array:
let arr = ['img1.png', 'img2.png', 'img3.png'];
Possiamo caricare queste immagini in un ciclo:
for (let path of arr) {
loadImage(path, function(image, err) {
document.body.append(image);
});
}
Il codice risulta elegante e senza callback hell, tuttavia, siamo tornati ai nostri due problemi: l'ordine delle immagini non è garantito ed è impossibile catturare il momento in cui tutte le immagini sono state caricate.
E non c'è una soluzione in questa situazione: è impossibile avviare un ciclo, utilizzare al suo interno una funzione asincrona, e poi catturare il momento del completamento di tutte le funzioni del ciclo. O non hai bisogno di catturare questo momento e il codice sopra è adatto a te, oppure benvenuto nel callback hell.
Ma non disperare - una soluzione al problema è possibile attraverso le Promise, che studieremo nelle prossime lezioni.
