2

我想使用 JS/JQuery 模拟进度条,这是我的 HTML 代码:

<p id="percentage">0%</p>

我想从 0 到 100 并看到 - 视觉上 - 慢动作的进展,所以我需要的是一个 For Loop 和一个暂停功能,但不幸的是没有类似睡眠的功能Javascript

第一次尝试:

经过一番研究,我找到了setTimeOut函数Jquery,你可以在这里找到Javascript代码:

for (i = 0; i < 100; i++) { 
    setTimeout(function() {
        $("#percentage").text(i+"%");
    }, 1000);
} 

但不太可能,这是行不通的,因为根据文档,该setTimeout函数是异步的,并且Javascript将继续执行。这意味着没有类似暂停的行为,并且进度条会在 1000 毫秒后从 0 变为 100,而不是从 0 变为 1。

第二次尝试:

虽然 setTimeout 无法解决我的问题,但我尝试实现自己的 sleep() 函数,这里是:

function sleep(ms){
    var waitTimeInMilliseconds = new Date().getTime() + ms;
    while(new Date().getTime() < waitTimeInMilliseconds ) true;
}

虽然我认为这是解决这种情况的灵丹妙药 - 这是一个坏主意,我知道 - 我很惊讶,因为这种方法也没有解决我的问题,并且界面在睡眠期间保持空闲,(我无法在我的 HTML 页面中单击、选择或执行任何操作)。

我怎么解决这个问题 ?

4

2 回答 2

3

你可能想要使用setInterval有点像这样的东西:

var i = 0;
var intervalId;
intervalId = setInterval(function() {
    $("#pourcentage").text(i+"%");
    if(i >= 100){
        clearInterval(intervalId);
    }
    i++;
}, 1000);

或使用setTimeout代替:

var i = 0;
var scheduleNextTimeout; 
scheduleNextTimeout = function(){
    setTimeout(function() {
        $("#pourcentage").text(i+"%");
        if(i < 100){
            scheduleNextTimeout();
        }
        i++;
    }, 1000);
};
scheduleNextTimeout();
于 2014-11-17T16:15:59.503 回答
0

我建议为此使用递归函数。

function doProgress (startingPercent, interval) {
    var percent = startingPercent++;

    window.setTimeout(function () {
        $('#percentage').text(percent.toString() + '%');

        if (percent < 100) {
            doProgress(percent, interval);
        }
    }, interval);
}
于 2014-11-17T16:20:19.400 回答