テーブルの画像をアニメーション化するためのsetTimeout

Question

テーブル内の画像を変更するコードがあります。私はそれを遅くするためにタイマーを入れてみて、場所にすべてのちょうど 'スナップ'の代わりに一種のロールアウトのように見えるようになるまでうまく動作します。どんな助けでも大歓迎です。以下のコード：

function showImage(){ 
    for(i=0; i<SIZE; i++) { 
     var showImage = document.getElementById(i); 
     showImage.src = i+'.png'; 
    } 
    setTimeout(showImage(),700); 
} 

Answer 1

編集：すぐに呼び出された関数式の内のコードを入れてください：

function showImage(){ 
    for(i=0; i<SIZE; i++){ 
     (function(i){ 
      setTimeout(function(){ 
       var img= document.getElementById('image' + i); 
       img.src = i + '.png'; 
      }, i * 100); 
     })(i); 
    } 
} 

Answer 2

を使用すると、内部で自身への関数呼び出しを置いてきたようにあなたの関数は、何度も何度も呼び出されます関数。それが動作しない場合は、ループの中とあなたのshowImage（I）関数の中で、このようなブラウザコンソールに出力を挿入することで、機器にあなたのコードを試してみてください。この（未テスト）

function showImages() 
{ 
    for(i=0; i<SIZE; i++) { 
     setTimeout(function() { 
     showImage(i); 
     }, 700)  
    }   
} 

function showImage(i) 
{ 
    var showImage = document.getElementById(i); 
    showImage.src = i+'.png';  
} 

をお試しください：

console.log("insert what you want to output here"); 

クロム（および他のブラウザ）ではF12を押してデバッガを起動し、コンソールタブが選択されていることを確認します。これで、ロギングを使用してスクリプトをデバッグできるはずです。