Kuvien asynkroninen lataus silmukassa JavaScriptissä
Oletetaan, että polut kuvatiedostoihin tallennetaan taulukkoon:
let arr = ['img1.png', 'img2.png', 'img3.png'];
Voimme ladata nämä kuvat silmukassa:
for (let path of arr) {
loadImage(path, function(image, err) {
document.body.append(image);
});
}
Koodi on kaunis ja ilman callback helliä, mutta olemme palanneet kahteen ongelmaamme: kuvien järjestystä ei taata, eikä kaikkien kuvien latauksen loppumisen hetkeä pysty tunnistamaan.
Eikä tähän tilanteeseen ole ratkaisua: on mahdotonta käynnistää silmukkaa, käyttää sen sisällä asynkronista funktiota ja sitten tunnistaa hetki jolloin kaikki silmukan funktiot ovat valmiita. Joko et tarvitse tätä hetkeä ja yllä oleva koodi sopii sinulle, tai tervetuloa callback helliin.
Mutta ei kannata masentua - ongelman ratkaisu on mahdollista promisien avulla, joita opimme seuraavilla oppitunneilla.
