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