Asynchroniczne ładowanie obrazów w pętli w JavaScript
Niech ścieżki do obrazów są przechowywane w tablicy:
let arr = ['img1.png', 'img2.png', 'img3.png'];
Możemy załadować te obrazy w pętli:
for (let path of arr) {
loadImage(path, function(image, err) {
document.body.append(image);
});
}
Kod wyszedł ładny i bez callback hell, jednak wróciliśmy do naszych dwóch problemów: kolejność obrazów nie jest gwarantowana i nie ma możliwości wychwycenia momentu załadowania wszystkich obrazów.
I w tej sytuacji nie ma rozwiązania: nie da się uruchomić pętli, użyć w niej funkcji asynchronicznej, a następnie wychwycić moment zakończenia wszystkich funkcji w pętli. Albo nie potrzebujesz łapać tego momentu i powyższy kod Ci odpowiada, albo witaj w callback hell.
Ale nie ma powodu do zmartwień - rozwiązanie problemu jest możliwe za pomocą obietnic (promises), które będziemy studiować w kolejnych lekcjach.
