eachとimage.onloadを使用して配列の順序を保持します

Question

私はimage.onloadを使用して、いくつかの非同期の問題があるのを試みます。イメージ配列の配列の順序が矛盾します。私はdbをチェックしてバグを引き起こしていないので、image.onloadでこの非同期問題を認識しました。誰もがこれに対処する経験がありますか？

$(data).each(function(i, val) { 

    var albumPhoto = ''; 

    albumPhoto = 'https://example.com/' + this.photo; 

    var temp_img = new Image(), 

    temp_img.src = albumPhoto; 
    temp_img.onload = function() { 

    images.push(albumPhoto); 

    } 
}) 

Answer 1

はあなたのimages配列を埋めるためにpushを使用しますが、jQueryのが提供するインデックス（i）を使用しないでください。

すなわち：変更​​

空の配列（images = []）をインスタンス化した後、あなたが値へのインデックスを設定することができるので、これは動作しますimages[i] = albumPhotoします。他のインデックスは未設定のままです。ここで

はそれが（代わりに、画像のロードのタイムアウトで、バニラJSで）どのようになるかを示す例だ

var target = [], 
 
    source = [1,2,3,4,5]; 
 

 
source.forEach(function(nr, index) { 
 
    setTimeout(function() { 
 
    target[index] = nr * 5; 
 
    console.log(JSON.stringify(target)); 
 
    }, Math.random() * 500); 
 
});

Answer 2

アレイ内のすべての画像を入れて、その後、削除エラーが発生したときにそれらを表示します。

$(data).each(function(i, val) { 
 
    var albumPhoto = 'https://example.com/' + val.photo; 
 
    var temp_img = new Image(); 
 
    temp_img.src = albumPhoto; 
 
    images.push(albumPhoto); 
 
    temp_img.onerror = function() { 
 
    var src = this.src; 
 
    var index = images.indexOf(src); 
 
    images.splice(index, 1); 
 

 
    } 
 
});