循环多个变量时使用 setTimeout 更新进度条

Question

假设您想要循环 3 个数组，长度为 x、y 和 z，并且对于每个循环，您想要更新一个进度条。例如：

function run() {
    x = 100;
    y = 100;
    z = 10;
    count = 0;
    for (i=0; i<x; i++) {
        //some code
        for (j=0; j<y; j++) {
            // some code
            for (k=0; k<z; k++) {
                //some code
                $("#progressbar").reportprogress(100*++count/(x*y*z));
            }
        }
    }
}

但是，在此示例中，进度条在函数完成之前不会更新。因此，我相信我需要使用 setTimeout 在函数运行时更新进度条，尽管我不确定当嵌套 for 循环时如何执行此操作。

我是否需要将每个循环分解为自己的函数，或者我可以将它们保留为嵌套的 for 循环吗？

我创建了一个 jsfiddle 页面，以防您想运行当前功能： http://jsfiddle.net/jrenfree /6V4Xp/

谢谢！

Answer 1

TL;DR：使用 CPS：http://jsfiddle.net/christophercurrie/DHqeR/

问题代码位于接受的答案（截至 6 月 26 日） '12）是它创建了一个超时事件队列，在三重循环退出之前不会触发该队列。您实际上并没有看到进度条实时更新，而是看到了变量在内部闭包中捕获时的值的最新报告。

我希望您的“递归”解决方案看起来有点像使用 继续传递风格 以确保循环不会继续，直到您通过 setTimeout 获得控制权。您可能不知道您正在使用 CPS，但如果您使用 setTimeout 来实现循环，您可能已经非常接近它了。

我已经详细说明了这种方法以供将来参考，因为了解它很有用，并且生成的演示比所提供的演示效果更好。对于三重嵌套循环，它看起来有点复杂，因此对于您的用例来说可能有点过分，但在其他应用程序中可能很有用。

(function($){
    function run() {
        var x = 100,
            y = 100,
            z = 10,
            count = 0;

        /*
        This helper function implements a for loop using CPS. 'c' is
        the continuation that the loop runs after completion. Each
        'body' function must take a continuation parameter that it
        runs after doing its work; failure to run the continuation
        will prevent the loop from completing.
        */
        function foreach(init, max, body, c) {
            doLoop(init);
            function doLoop(i) {
                if (i < max) {
                    body(function(){doLoop(i+1);});
                }
                else {
                    c();
                }
            }
        }

        /*
        Note that each loop body has is own continuation parameter (named 'cx',
        'cy', and 'cz', for clarity). Each loop passes the continuation of the
        outer loop as the termination continuation for the inner loop.
        */
        foreach(0, x, function(cx) {
            foreach(0, y, function(cy) {
                foreach(0, z, function(cz) {
                    count += 1;
                    $('#progressbar').reportprogress((100*(count))/(x*y*z));
                    if (count * 100 % (x*y*z) === 0) {
                        /*
                        This is where the magic happens. It yields
                        control to the javascript event loop, which calls
                        the "next step of the foreach" continuation after
                        allowing UI updates. This is only done every 100
                        iterations because setTimeout can actually take a lot
                        longer than the specified 1 ms. Tune the iterations
                        for your specific use case.                   
                        */
                        setTimeout(cz, 1);
                    } else {
                        cz();
                    }
                }, cy);
            }, cx);
        }, function () {});    
    }

    $('#start').click(run);
})(jQuery);

在jsFiddle上可以看到这个版本更新得相当顺利。

Answer 2

如果您想使用 setTimeout，您可以将 x、y、z 和 count 变量捕获到闭包中：

function run() {
    var x = 100,
        y = 100,
        z = 10,
        count = 0;
    for (var i=0; i<x; i++) {
        for (var j=0; j<y; j++) {
            for (var k=0; k<z; k++) {
                (function(x, y, z, count) {
                    window.setTimeout(function() {
                        $('#progressbar').reportprogress((100*count)/(x*y*z));
                    }, 100);
                })(x, y, z, ++count);
            }
        }
    }
}

现场演示。

Answer 3

可能reportprogress插件中的jquery函数使用setTimeout。例如，如果您使用 setTimeout 并使其在 0 毫秒后运行，并不意味着这将立即运行。该脚本将在没有其他 javascript 执行时执行。

在这里你可以看到，我尝试在计数等于 0 时记录计数。如果我在 setTimeout 回调函数中执行此操作，则在所有周期后执行该函数，你将得到 100000 没有 0。这解释了为什么进度条仅显示 100%。 js Fiddle 链接到此脚本

function run() {
    x = 100;
    y = 100;
    z = 10;
    count = 0;
    for (i=0; i<x; i++) {
        //some code
        for (j=0; j<y; j++) {
            // some code
            for (k=0; k<z; k++) {
                //some code
                if(count===0) {
                     console.log('log emidiatelly ' + count);
                    setTimeout(function(){
                        console.log('log delayed ' + count);
                    },0);
                }
                count++;
            }
        }
    }
}
console.log('started');
run();
console.log('finished');

在 setTimeout 回调函数中包装 for(i) 之后的所有内容使进度条正常工作。 js Fiddle 链接

编辑：
刚刚检查了 item 的样式设置代码实际上一直在执行。我认为浏览器优先级可能是先执行 javascript，然后显示 CSS 更改。

我写了另一个例子，其中我用 setInterval 函数替换了第一个 for 循环。像这样使用它有点错误，但也许你可以用这个 hack 来解决这个问题。

var i=0;
var interval_i = setInterval(function (){

    for (j=0; j<y; j++) {
        for (k=0; k<z; k++) {
            $("#progressbar").reportprogress(100*++count/(x*y*z));
        }
    }

  i++;
  if((i<x)===false) {
    clearInterval(interval_i);
  }
},0);

JS 小提琴

Answer 4

我根据上次回复找到了解决方案，但将间隔时间更改为 1。该解决方案在主线程执行密集任务时显示加载程序。

定义这个函数：

       loading = function( runme ) {
                    $('div.loader').show();
                    var interval = window.setInterval( function() { 
                          runme.call();  
                          $('div.loader').hide();
                          window.clearInterval(interval);
                    }, 1 );
               };

并这样调用它：

       loading( function() {
                // This take long time...
                data.sortColsByLabel(!data.cols.sort.asc);
                data.paint(obj);
              });