javascript - 如何编写非阻塞的javascript代码？

Question

如何进行简单的非阻塞 Javascript 函数调用？例如:

  //begin the program
  console.log('begin');
  nonBlockingIncrement(10000000);
  console.log('do more stuff'); 

  //define the slow function; this would normally be a server call
  function nonBlockingIncrement(n){
    var i=0;
    while(i<n){
      i++;
    }
    console.log('0 incremented to '+i);
  }

输出

"beginPage" 
"0 incremented to 10000000"
"do more stuff"

如何形成这个简单的循环来异步执行并通过回调函数输出结果？这个想法是不阻止“做更多的事情”:

"beginPage" 
"do more stuff"
"0 incremented to 10000000"

我已经尝试遵循有关回调和延续的教程，但它们似乎都依赖于外部库或函数。他们都没有凭空回答这个问题:如何编写非阻塞的 Javascript 代码!？

<小时/>

^{在提问之前我已经非常努力地寻找这个答案；请不要以为我没看。 Everything I found is Node.js specific ( [1] , [2] , [3] , [4] , [5] ) or otherwise specific to other functions or libraries ( [6] , [7] , [8] , [9] 、 [10] 、 [11] )，特别是 JQuery 和 setTimeout()。请帮助我使用 Javascript 编写非阻塞代码，而不是像 JQuery 和 Node.js 这样的 Javascript 编写的工具。 请先重新阅读该问题，然后再将其标记为重复。}

Answer 1

为了使循环非阻塞，您必须将其分成几个部分，并允许 JS 事件处理循环在继续下一部分之前消耗用户事件。

实现此目的的最简单方法是执行一定量的工作，然后使用 setTimeout(..., 0) 对下一个工作 block 进行排队。至关重要的是，该排队允许 JS 事件循环在继续下一项工作之前处理同时排队的任何事件:

function yieldingLoop(count, chunksize, callback, finished) {
    var i = 0;
    (function chunk() {
        var end = Math.min(i + chunksize, count);
        for ( ; i < end; ++i) {
            callback.call(null, i);
        }
        if (i < count) {
            setTimeout(chunk, 0);
        } else {
            finished.call(null);
        }
    })();
}

用法:

yieldingLoop(1000000, 1000, function(i) {
    // use i here
}, function() {
    // loop done here
});

参见http://jsfiddle.net/alnitak/x3bwjjo6/对于一个演示，其中回调函数仅将变量设置为当前迭代计数，并且基于单独的 setTimeout 的循环轮询该变量的当前值并使用其值更新页面值。