Question

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

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

我想从0变为100并且看到-Visually-慢动作的进展，所以我需要的是For循环和暂停函数，但不幸的是{{1}中没有类似睡眠的函数}

第一次尝试：

在做了一些研究之后，我在Javascript找到了setTimeOut函数，你可以在这里找到Jquery代码：

Javascript

但不太可能，这不起作用，因为根据文档，for (i = 0; i < 100; i++) { setTimeout(function() { $("#percentage").text(i+"%"); }, 1000); }函数是异步的，setTimeout的执行将继续。这意味着没有类似暂停的行为，进度条将在1000ms后从0变为100，而不是从0变为1.

第二次尝试：

虽然setTimeout无法解决我的问题，但我尝试实现自己的sleep（）函数，这里是：

Javascript

虽然我认为这是这种情况的灵丹妙药 - 我知道这是一个坏主意 - 我很惊讶，因为这种方法也没有解决我的问题，并且在睡眠时间界面仍然处于空闲状态，（我无法点击，选择或在我的HTML页面中执行任何操作）。

我该如何解决这个问题？

Answer 1

你可能想要使用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();

Answer 2

我建议使用递归函数。

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

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

        if (percent < 100) {
            doProgress(percent, interval);
        }
    }, interval);
}

Javascript中的同步睡眠功能

第一次尝试：

第二次尝试：

2 个答案: