我想使用 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 页面中单击、选择或执行任何操作)。
我怎么解决这个问题 ?