Ασύγχρονη φόρτωση εικόνων σε βρόχο σε JavaScript

Αφήστε τις διαδρομές προς τις εικόνες να αποθηκεύονται σε έναν πίνακα:

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

Μπορούμε να φορτώσουμε αυτές τις εικόνες σε έναν βρόχο:

for (let path of arr) {
	loadImage(path, function(image, err) {
		document.body.append(image);
	});
}

Ο κώδικας βγήκε όμορφος και χωρίς callback hell, ωστόσο, επιστρέψαμε στα δύο προβλήματά μας: η σειρά των εικόνων δεν είναι εγγυημένη και είναι αδύνατο να πιαστεί η στιγμή φόρτωσης όλων των εικόνων.

Και δεν υπάρχει λύση σε αυτήν την κατάσταση: είναι αδύνατο να εκτελέσετε έναν βρόχο, να χρησιμοποιήσετε μέσα σε αυτόν μια ασύγχρονη συνάρτηση, και μετά να πιάσετε τη στιγμή ολοκλήρωσης όλων των συναρτήσεων του βρόχου. Είτε δεν χρειάζεται να πιάσετε αυτήν τη στιγμή και ο παραπάνω κώδικας σας ταιριάζει, είτε καλώς ήρθατε στο callback hell.

Αλλά, δεν πρέπει να στεναχωριέστε - μια λύση στο πρόβλημα είναι δυνατή μέσω των promises, τα οποία θα μελετήσουμε στα επόμενα μαθήματα.