setTimeout動畫表格圖像

我有一些代碼可以改變表格中的圖像。工作正常，直到我試圖讓計時器放慢速度，並使它看起來像他們滾出，而不是所有隻是'快照'到位。任何幫助不勝感激。代碼如下：setTimeout動畫表格圖像

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

來源

2016-10-05 shep

和你現在的代碼有什麼問題？ – DTH

無論如何..您的showImage函數將永遠不會退出，因爲您一次又一次地從 – DTH

中調用它，就像@DTH所說的那樣，您需要將函數的定義（名稱）傳遞給setTimeout，而不是執行它。所以寫'setTimeout（showImage，700）;' – AxelH

編輯：把裏面的一個立即調用的函數表達式的代碼：

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); 
    } 
}

來源

2016-10-05 10:14:12

謝謝，但分配規範要求使用setTimeout推出圖像。我已經在倒數計時器的另一個功能中運行正常，但對此不滿意（毫無疑問，這是很好的理由）。 – shep

我修改了答案。希望有所幫助。 –

你的功能將被一次又一次地叫，因爲你已經把一個函數調用本身內功能。試試這個（未測試）

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';  
}

如果它不工作，由您循環您的showImage內部和插入輸出到瀏覽器控制檯這樣的嘗試來測試您的代碼（我）功能：

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

在chrome（和其他瀏覽器）中按F12調出調試器，並確保選擇了控制檯選項卡。現在您應該可以使用日誌記錄來調試腳本。

來源

2016-10-05 11:06:33 DTH

謝謝，但我仍然無法讓這些工作。我也從onClick按鈕調用函數。 – shep

@shep嘗試輸出showImage變量以查看結果是否正常。此外，還要在你的代碼中檢查你的代碼。 – DTH

@shep：用我更新後的代碼嘗試它...我犯了一個愚蠢的錯誤:) – DTH

setTimeout動畫表格圖像

回答

相關問題