Javascript 中的同步睡眠函数

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

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

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

第一次尝试：

经过一些研究后，我发现setTimeOut函数于Jquery，您可以在这里找到Javascript code :

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 页面中单击、选择或执行任何操作）。

我怎么解决这个问题 ？

你可能想要类似这样的东西设置时间间隔 https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setInterval:

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

或使用设置超时时间 https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout反而：

var i = 0;
var scheduleNextTimeout; 
scheduleNextTimeout = function(){
    setTimeout(function() {
        $("#pourcentage").text(i+"%");
        if(i < 100){
            scheduleNextTimeout();
        }
        i++;
    }, 1000);
};
scheduleNextTimeout();