javascript - Javascript 中的同步休眠函数

Question

我想用 JS/JQuery 模拟一个进度条，这是我的 HTML 代码:

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

我想从 0 到 100 并在视觉上看到慢动作的进展，所以我真正需要的是一个 For 循环和一个暂停函数，但不幸的是 Javascript 中没有类似 sleep 的函数

第一次尝试:

经过一番研究，我在Jquery中找到了setTimeOut函数，你可以在这里找到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;
}

虽然我认为这是解决这种情况的 Elixir ——我知道这是个坏主意——但我很惊讶，因为这种方法也没有解决我的问题，并且界面在休眠期间保持空闲状态,(我无法在我的 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();