Javascript中的同步睡眠function

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

0% 

我想从0到100看看-Visually-慢动作的进展，所以我需要的是For循环和暂停function，但不幸的是Javascript没有类似睡眠的function

第一次尝试：

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

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

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

第二次尝试：

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

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

虽然我认为这是这种情况的灵丹妙药 – 我知道这是一个糟糕的想法 – 我很惊讶，因为这种方法也没有解决我的问题，并且在睡眠时间界面仍然处于空闲状态，（我无法在我的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); }