javascript asynconously divを非同期的に更新する

Question

Webページ内のDIVに複数の画像を1つずつ表示する必要があります。 2枚の画像の間には時間差があるはずです。ここに私が試みたコードがあります。

$('#abc').prepend('<img id="theImg" src="D:/Image_Store/Character/Animal/Pet/cat2.png" />') 
    wait(1000); 
    $('#abc').prepend('<img id="theImg" src="D:/Image_Store/Character/Animal/Pet/dog1.png" />') 
    wait(1000); 
    $('#abc').prepend('<img id="theImg" src="D:/Image_Store/Character/Animal/Pet/dog2.png" />') 
    wait(1000); 
    $('#abc').prepend('<img id="theImg" src="D:/Image_Store/Character/Animal/Pet/parrot1.png" />') 
    wait(1000); 

EDIT

ウェイト機能は、ここで

function wait(ms){ 
     var start = new Date().getTime(); 
     var end = start; 
     while(end < start + ms) { 
     end = new Date().getTime(); 
     } 
    } 

である。しかし、これは作業だけ最後の画像が表示されていません。私はそれをどのように把握できますか？

Answer 1

ブラウザの行間でJavaScriptコードの実行を中断することはできません。少なくとも、ブラウザのUI全体（または少なくともそのタブ）がロックされ、ページの更新はレンダリングされません。代わりに

、あなたのイメージを更新するタイミングコールバックの一連のスケジュール：

[ "D:/Image_Store/Character/Animal/Pet/cat2.png", 
    "D:/Image_Store/Character/Animal/Pet/dog1.png", 
    "D:/Image_Store/Character/Animal/Pet/dog2.png", 
    "D:/Image_Store/Character/Animal/Pet/parrot1.png" 
].forEach(function(img, index) { 
    setTimeout(function() { 
     $("<img>").attr("src", img).prependTo("#abc"); 
    }, 1000 * index); 
}); 

あり、我々はなどは0ms後の最初の更新、1000ミリ秒後の第二、2000ミリ秒後の第3、

---

をスケジュール

サイドノート：元のコードに複数のimgの要素が同じidという値を追加していました。上記のコードでは、複数の要素に同じidを使用することは無効であるため、複数のimg要素を引き続き使用しますが、idを与えません。あなたの目標は、あなたが複数のソースで更新単一imgの要素を持っていた場合

、我々は少し違ったものにしてください：

[ "D:/Image_Store/Character/Animal/Pet/cat2.png", 
    "D:/Image_Store/Character/Animal/Pet/dog1.png", 
    "D:/Image_Store/Character/Animal/Pet/dog2.png", 
    "D:/Image_Store/Character/Animal/Pet/parrot1.png" 
].forEach(function(img, index) { 
    if (index === 0) { 
     // Create and append the img 
     $("<img>").attr("id", "theImg").attr("src", img).prependTo("#abc"); 
    } else { 
     // Update it 
     setTimeout(function() { 
      $("#theImg").attr("src", img); 
     }, 1000 * index); 
    } 
});