在JavaScript加載太快的window.settimeout

Question

我有這個js代碼，必須使我的頁面加載面板的高度更大。但它似乎加載速度太快。

var TimerID; 

function LoadDoc() { 
    for(i=0;i<=100;i++){  
     TimerID=window.setTimeout(MoveRolldownDown(i),5000); 
    } 
} 

function MoveRolldownDown(i){ 
    document.getElementById('Rolldown').style.height=i + '%'; 
    window.clearTimeout(TimerID); 
} 

這幾乎立即加載在頁面中，所以我如何使這個加載速度變慢。在我的HTML頁面的頂部，我有這個代碼

document.onreadystatechange = function() { 
    if(document.readyState === "complete"){ 
     LoadDoc(); 
    } 
} 

Answer 1

第一件事 - 你的函數正在執行，所以你需要把它們放在另一個函數中。

還有一件事 - 所有的你的超時結束在基本上同一時間！

嘗試這樣：

function LoadDoc() { 
    for (i = 0; i <= 100; i++) { 
     var down = i; 
     setTimeout((function (down) { 
      return function(){ //return function for timeout 
       MoveRolldownDown(down); 
      }; 
     })(i), 10 * i); 
    } 
} 

function MoveRolldownDown(i) { 
    document.getElementById('Rolldown').style.height = i + '%'; 
} 

演示：http://jsfiddle.net/maniator/RTaZh/

Answer 2

是的，這是因爲你調用的參數範圍內的功能，

你可能要像

window.setTimeout(MoveRolldownDown,5000, [i]); 

https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout