Javascript setTimeout（）; 對於ProgressBar不起作用

Question

在我的網站上，我有一個進度欄，當我單擊“ 下載”按鈕時，進度欄將啟動。 順便說一下，我希望它進展緩慢，所以我想可以使用setTimeout(); 。

http://jsfiddle.net/pHxSy/9/

如果您查看該jsfiddle，則單擊“ 下載”按鈕會發生任何事情。 我已經在firefox上進行了測試，控制台告訴我ReferenceError: startTime is not defined 。

我該如何解決？

Answer 1

您分享的小提琴中有一些錯誤

1. onclick="startTime(i);" 應該是onclick="startTime(0)"

2. 線

    document.getElementById("movingbar").style.width = i + "%"; 

應該

   document.getElementById("prog").style.width = i + "%";

因為你的div名稱是prog而不是movingbar

工作小提琴

Answer 2

設置您的onclick="startTime(i);" 如onclick="startTime(0);"

<input value="Download" type="button" onclick="startTime(0);">

這是JSBin

Answer 3

在功能參數中設置值

<input value="Download" type="button" onclick="startTime(0);">

JSFIDDLE

Answer 4

您走在正確的道路上，只需進行一些修復即可：

• onclick="startTime(i);" 應該是onclick="startTime(0);"
• .getElementById("movingbar")應該是.getElementById("prog")
• setTimeout('startTime('+i+')',50); 應該設置為setTimeout(function(){ startTime(i); }, 50); 。

后者通常是最佳實踐。 您不想在Javascript中觸發eval （ 在此處查看 ）。

工作中的js 在這里擺弄。

最后，如果您想在到達終點時使其速度變慢，可以使用一個簡單的技巧：

setTimeout(function(){ startTime(i); }, 50 + i);

Answer 5

您可以找到工作的小提琴http://jsfiddle.net/BWamw/

或僅粘貼此代碼，無需在調用startTime（）時傳遞參數

var progress = 0;
var interval;
function startTime() {
    interval = window.setInterval(function () {
       document.getElementById("prog").style.width = progress + "%";
       progress++;
       if (progress >= 100) {
           interval =window.clearInterval(interval)
       }
    }, 100)
}

您最好設置setInterval，它將每隔一段時間執行指定的功能。 這樣可以避免遞歸

它也很容易使用。