将 javascript 与 jquery 和 bootstrap 结合使用,我希望在繁重的 javascript 计算期间有漂亮的进度条。我确切地知道计算的进度状态,但 CSS 在计算期间不会更新。
WebWorker 不是一个解决方案,因为我需要在主线程中使用我无法轻松复制/克隆到工作线程的模型。
例子: 进度条在最后更新。我希望它在此过程中更新。
html代码:
<div class="progress">
<div id="loading" class="bar progress-bar progress-bar-info" style="width: 0%"></div>
</div>
javascript代码:
for (var i = 0; i <= 10; i++) {
$('#loading').css('width', i * 10 + '%');
heavycomputation();
};
最佳答案
Oleq 提出了这个有效的解决方案... jsfiddle.net/nNZCE
function heavycomp(millis, progress) {
var date = new Date();
var curDate = null;
do {
curDate = new Date();
}
while (curDate - date < millis);
if ( progress > 10 )
return;
setTimeout( function() {
console.log( progress );
$('#loading').css('width', progress * 10 + '%');
heavycomp( 200, ++progress );
}, 200 );
}
heavycomp( 200, 0 );
关于javascript - 长时间的 JavaScript 计算期间的 css 进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18059127/