Caricamento asincrono di immagini in un ciclo in JavaScript

Supponiamo che i percorsi delle immagini siano memorizzati in un array:

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

Possiamo caricare queste immagini in un ciclo:

javascriptfor (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.