进度条与嵌套For循环 [英] Progress Bar with Nested For-loops
问题描述
setTimeout 来自这里），并试图使用进度条从（标签之一）。 $ b
源代码（稍微修改了一个'done'回调）异步函数：
function loopAsync（array，fn，done，chunk，context）{
context = context ||窗口;
chunk = chunk || 10;
var index = 0;
函数doChunk（）{
var cnt = chunk;
while（cnt-&& index< array.length）{
//用args（value，index，array）调用callback
fn.call（context，array [索引]，索引，数组）;
++ index;
//console.log(\"index是+ index）;
progressBar（index）;
if（index< array.length）{
// set async iteration $ b $ setTimeout（doChunk，1）;
} else {
完成&& （）完成;
}
}
doChunk（）;
$ b无论是异步的，即使在正常情况下也是如此，循环：
-
W3School示例使用 setInterval ，这是不准确的因为for循环可能已经在 setInterval 之前完成了处理。
-
有两个嵌套的for- （而不是跟踪中的 i ）（（var i = 0 ...），它需要跟踪第一个循环*第二个循环的准确性（因为没有出现停止 - 尤其是因为第二个循环可能会有比第一个更大的数组长度）。
例如：
异步使用上面的链接示例：
loopAsync（arr1，function（item1）{
loopAsync（arr2，function（item2）{
//比较或处理item1与item2
}）;
}，doNext）;
或者，基本上没有异步循环一样：
（var item1 = 0; item1< arr1.length; ++ item1）{
for（var item2 = 0; item2< arr2.length; + + item2）{
//做些事情...需要跟踪两者的进度？
code
$ b $ ol $ start $ $
$ li >需要是通用的，可以在任何嵌套（或非嵌套）的for循环操作中使用。
这些应该如何问题得到解决，最好不用jquery？
解决方案我认为这只是基本的增量。你可以使用这样的东西：
function progress（total）{this。 inc =（total！== 0？this.inc || 0：-1）+ 1; var percentage = Math.floor（this.inc / total * 100）; document.write（'Processing'+ this.inc +'/'+ total +''+ percentage +'％< br />>'）;} var arr1 = [1,2,3,4,5]; var arr2 = [1,2,3,4,5,6,7,8,9]; for（var item1 = 0; item1< arr1.length; ++ item1）{for（var item2 = 0; item2 < arr2.length; ++ item2）{progress（arr1.length * arr2.length）; （var item1 = 0; item1< arr1.length; ++ item1）{for（var item2 = 0）; //重新设置counterprogress（0）; //计算另一个progressvar arr3 = [1,2,3]; ; item2< arr2.length; ++ item2）{for（var item3 = 0; item3< arr3.length; ++ item3）{progress（arr1.length * arr2.length * arr3.length）;
$ b $ p
>另一个例子随机执行时间（使用承诺做异步过程）
函数进度（total）{this.inc =（total！== 0？this.inc || 0：-1）+ 1; （）函数processing_something（callback）{setTimeout（function（）{callback（）; / /处理'+ Math.floor（this.inc / total * 100）+'％';} /执行1到10秒}，Math.floor（Math.random（）* 10）* 1000）;} var arr1 = [1,2,3,4,5]; var arr2 = [1,2,3 ，4,5,6,7,8,9]; for（var item1 = 0; item1< arr1.length; ++ item1）{for（var item2 = 0; item2< arr2.length; ++ item2 ）{new Promise（function（resolve）{//做一些需要时间processing_something（resolve）;}）。then（function（）{progress（arr1.length * arr2.length）;}）; }}
< div id =progress> < / div>
Looping over two different arrays, both for-loops nested within each other asynchronously (as chunks and setTimeout sourced from here), and trying to use the progress bar example from W3Schools here (the Label one).
The sourced (slightly modified for a 'done' callback) asynchronous function:
function loopAsync(array, fn, done, chunk, context) {
context = context || window;
chunk = chunk || 10;
var index = 0;
function doChunk() {
var cnt = chunk;
while (cnt-- && index < array.length) {
// callback called with args (value, index, array)
fn.call(context, array[index], index, array);
++index;
//console.log("index is " + index);
progressBar(index);
}
if (index < array.length) {
// set Timeout for async iteration
setTimeout(doChunk, 1);
} else {
done && done();
}
}
doChunk();
}
Regardless of being asnychronous, these are the same problems even with a normal for-loop:
The W3School example is using setInterval, which is inaccurate since the for-loops may already finish processing before setInterval is.
There are two nested for-loops, so instead of tracking the progress of (for example) i in for (var i=0...), it needs to track the first loop * the second loop for accuracy (as to not appear stopped - especially because the second loop will likely have a larger array length than the first).
For example:
Asynchronously using the linked example above:
loopAsync(arr1, function (item1) {
loopAsync(arr2, function (item2) {
//Comparing or processing item1 with item2
});
}, doNext);
Or, basically the same without asynchronous looping:
for (var item1 = 0; item1 < arr1.length; ++item1) {
for (var item2 = 0; item2 < arr2.length; ++item2) {
//Doing things... need to track progress of both?
}
}
- Needs to be generic, able to be used in any nested (or non-nested) for-loop operation.
How should these problems be addressed, preferably without jquery?
解决方案 i think thats just need basic increment. you can use something like this:
function progress(total) {
this.inc = (total !== 0? this.inc || 0: -1) + 1;
var percentage = Math.floor(this.inc / total * 100);
document.write('Processing ' + this.inc + '/' + total + ' ' + percentage + '%<br/>');
}
var arr1 = [1,2,3,4,5];
var arr2 = [1,2,3,4,5,6,7,8,9];
for (var item1 = 0; item1 < arr1.length; ++item1) {
for (var item2 = 0; item2 < arr2.length; ++item2) {
progress(arr1.length * arr2.length);
}
}
// reseting counter
progress(0);
// count another progress
var arr3 = [1,2,3];
for (var item1 = 0; item1 < arr1.length; ++item1) {
for (var item2 = 0; item2 < arr2.length; ++item2) {
for (var item3 = 0; item3 < arr3.length; ++item3) {
progress(arr1.length * arr2.length * arr3.length);
}
}
}
another example with random execution time (use promise to doing async process)
function progress(total) {
this.inc = (total !== 0? this.inc || 0: -1) + 1;
document.getElementById('progress').innerHTML = 'Processing ' + Math.floor(this.inc / total * 100) + '%';
}
function processing_something(callback) {
setTimeout(function(){
callback();
//execution between 1 to 10 secs
}, Math.floor(Math.random() * 10) * 1000);
}
var arr1 = [1,2,3,4,5];
var arr2 = [1,2,3,4,5,6,7,8,9];
for (var item1 = 0; item1 < arr1.length; ++item1) {
for (var item2 = 0; item2 < arr2.length; ++item2) {
new Promise(function(resolve) {
//do something that require time
processing_something(resolve);
}).then(function(){
progress(arr1.length * arr2.length);
});
}
}
<div id="progress"></div>
这篇关于进度条与嵌套For循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
