js循环中的第一个进度条未更新
js循环中的第一个进度条未更新
提问于 2020-02-19 11:12:32
我有两个进度条，我想按顺序更新它们。在第一个进度条达到100%之后。然后，第二个进度条应该会启动。进度条跟随数组键。在第一个进度条上显示a,b,c，在第二个进度栏上显示d,e,f。但是，第一个进度在第一个任务处停止，并继续运行第二个进度条。我曾尝试增加超时。但是，第一个进度条仍然停留在第一个任务中。
<?php
$grouped_records=
[
1=>array('a','b','c'),
2=>array('d','e','f')
];
?>
<html>
<head>
<style>
.progress-bar-1 .progress-bar-2
{
border: 1px solid black;
background-color: #f0f0f0;
}
.progress-bar-1 div , .progress-bar-2 div
{
background-color: gray;
height: 2.00em;
font-size:30px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
function delayedLoop(collection, delay, callback, context)
{
context = context || null;
var i = 0,
nextInteration = function()
{
if (i === collection.length)
{
return;
}
callback.call(context, collection[i], i);
i++;
setTimeout(nextInteration, delay);
};
nextInteration();
}
Object.size = function(obj)
{
var size = 0, key;
for (key in obj)
{
if (obj.hasOwnProperty(key)) size++;
}
return size;
};
$(document).ready(function()
{
var level_records ='<?php echo json_encode($grouped_records);?>';
level_records =JSON.parse(level_records);
//get object size-https://stackoverflow.com/questions/5223/length-of-a-javascript-object
var size =Object.size(level_records);
interval_array =[1000,1000];
for(i=1;i<=size;i++)
{
css_class =".progress-bar-"+i+" div";
//delayedloop-https://stackoverflow.com/questions/30987218/update-progressbar-in-each-loop
var progressBar = document.querySelector(css_class);
items =level_records[i];
delayedLoop(items, interval_array[i], function(item, index)
{
perc =((index + 1) / items.length * 100);
perc =(Math.round(perc * 100) / 100).toFixed(2);
var width =perc + "%";
progressBar.style.width = width;
progressBar.innerHTML = (index + 1) + '/' + items.length + ' - ' + items[index] + ' (' + width + ')';
});
}
})
</script>
</head>
<body>
<div class="progress-bar-1">
<div style="width: 0">
</div>
</div>
<div>interval</div>
<div class="progress-bar-2">
<div style="width: 0">
</div>
</div>
</body>
提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-19 11:48:21
我已经引用了this，并尝试用使用setTimeout()的异步循环替换for循环。我计算当前级别的项目列表，items_count。由于我在每个级别中循环项目时设置了延迟1000时，我将从一个级别到另一个级别延迟计数为items_count * 1000(如果9个项目将是9000个延迟，则进入第二个进度条)。这解决了我的问题
<?php
$grouped_records=
[
1=>array('a','b','c'),//level 1-first progressbar
2=>array('d','e','f')//level 2-second progressbar
];
?>
<html>
<head>
<style>
.progress-bar-1 .progress-bar-2
{
border: 1px solid black;
background-color: #f0f0f0;
}
.progress-bar-1 div , .progress-bar-2 div
{
background-color: gray;
height: 2.00em;
font-size:30px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
function delayedLoop(collection, delay, callback, context)
{
context = context || null;
var i = 0,
nextInteration = function()
{
if (i === collection.length)
{
return;
}
callback.call(context, collection[i], i);
i++;
setTimeout(nextInteration, delay);
};
nextInteration();
}
Object.size = function(obj)
{
var size = 0, key;
for (key in obj)
{
if (obj.hasOwnProperty(key)) size++;
}
return size;
};
$(document).ready(function()
{
var level_records ='<?php echo json_encode($grouped_records);?>';
level_records =JSON.parse(level_records);
//get object size-https://stackoverflow.com/questions/5223/length-of-a-javascript-object
var size =Object.size(level_records);
//interval_array =[1000,1000];
/* for(i=1;i<=size;i++)
{
css_class =".progress-bar-"+i+" div";
//delayedloop-https://stackoverflow.com/questions/30987218/update-progressbar-in-each-loop
var progressBar = document.querySelector(css_class);
items =level_records[i];
console.log(items);
delayedLoop(items, interval_array[i], function(item, index)
{
perc =((index + 1) / items.length * 100);
perc =(Math.round(perc * 100) / 100).toFixed(2);
var width =perc + "%";
progressBar.style.width =width;
progressBar.innerHTML =(index + 1) + '/' + items.length + ' - ' + items[index] + ' (' + width + ')';
});
}*/
//https://stackoverflow.com/questions/17957823/javascript-how-to-update-a-progress-bar-in-a-for-loop
var i = 1;
(function doSort()
{
// update progress
css_class =".progress-bar-"+i+" div";
//delayedloop-https://stackoverflow.com/questions/30987218/update-progressbar-in-each-loop
var progressBar =document.querySelector(css_class);
items =level_records[i];
items_count =level_records[i].length;
interval_nextlevel =items_count*1000;//count time for next level to start and pass to setTimout()
console.log(items_count);
//console.log(items);
delayedLoop(items, 1000, function(item, index)
{
perc =((index + 1) / items.length * 100);
perc =(Math.round(perc * 100) / 100).toFixed(2);
var width =perc + "%";
progressBar.style.width =width;
progressBar.innerHTML =(index + 1) + '/' + items.length + ' - ' + items[index] + ' (' + width + ')';
});
// do stuff
i++;
if (i <= size)
{
setTimeout(doSort, interval_nextlevel);
}
})();
})
</script>
</head>
<body>
<div class="progress-bar-1">
<div style="width: 0">
</div>
</div>
<div>interval</div>
<div class="progress-bar-2">
<div style="width: 0">
</div>
</div>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60292451
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号