使用 setTimeout 运行大型任务而不阻塞输入，并使用 Promise 找出任务何时完成

Question

目前，我有一个函数被调用以使用许多 setTimeout 来完成一项大型任务，以便不阻止页面交互。

示例代码如下

function runAsync(maxMs, throttle, func){
  var begin = window.performance.now();
  var cont = func(throttle);
  var end = window.performance.now();
  if (cont){
    var newThrottle = Math.ceil((throttle/(end-begin))*maxMs);
    setTimeout(function(){
      runAsync(maxMs, newThrottle, func);
    }, 0);
  }
}

a = 0;

function makeHuge(addNum){
  var target = 1000000000;
  for (var x = 0; x < Math.min(addNum, target-a); x++){
    a ++;
  }
  $('#result').text(a);
  return a < target;
}

$('#run').on('click', function(){
  a = 0;
  runAsync(16, 100, makeHuge);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="result"></span><br/>
<button id="run">Run</button>

正如您在上面看到的，setTimeout 用于在不阻止用户交互的情况下执行长运行任务。被调用的函数 func 必须 return 一个布尔值，表示是否继续执行该操作。油门值用于将 func 的执行时间保持在 maxMs 以下，如果设置为 16，则表示类似于 60fps。

但是，使用此设置，我无法弄清楚如何合并新的 Promise 以在 runAsync 任务完成或失败时通知我。

Answer 1

我将给出两个解决方案，因为在您的情况下需要在速度和惯用之间进行权衡。

最佳性能解决方案

setTimeout 具有糟糕的错误处理特性，因为错误总是在 Web 控制台结束，因此在所有内容周围使用 try/catch 以手动将错误传递给 reject。我还不得不重构一下：

function runAsync(maxMs, throttle, func){
  return new Promise((resolve, reject) => {
    setTimeout(function again(){
      try {
        var begin = window.performance.now();
        if (!func(throttle)) return resolve();
        var end = window.performance.now();
        throttle = Math.ceil((throttle/(end-begin))*maxMs);
        setTimeout(again, 0);
      } catch (e) {
        reject(e);
      }
    }, 0);
  });
}

a = 0;

function makeHuge(addNum){
  var target = 1000000000;
  for (var x = 0; x < Math.min(addNum, target-a); x++){
    a ++;
  }
  result.innerHTML = a;
  return a < target;
}

run.onclick = function(){
  a = 0;
  runAsync(16, 100, makeHuge)
  .then(() => result.innerHTML = "Done!")
  .catch(e => console.error(e));
};

<span id="result"></span><br/>
<button id="run">Run</button>

非常丑陋，有一个 Promise 构造函数和 try/catch muck，但有一个干净的替代方案。

最惯用的解决方案

使用返回承诺的 wait 助手来驯服 setTimeout，始终使用承诺：

var wait = ms => new Promise(resolve => setTimeout(resolve, ms));

function runAsync(maxMs, throttle, func){
  var begin = window.performance.now();
  var cont = func(throttle);
  var end = window.performance.now();
  return (!cont)? Promise.resolve() : wait(0).then(() => {
    var newThrottle = Math.ceil((throttle/(end-begin))*maxMs);
    return runAsync(maxMs, newThrottle, func);
  });
}

a = 0;

function makeHuge(addNum){
  var target = 1000000000;
  for (var x = 0; x < Math.min(addNum, target-a); x++){
    a ++;
  }
  result.innerHTML = a;
  return a < target;
}

run.onclick = function(){
  a = 0;
  runAsync(16, 100, makeHuge)
  .then(() => result.innerHTML = "Done!")
  .catch(e => console.error(e));
};

<span id="result"></span><br/>
<button id="run">Run</button>

易于阅读，结构类似于您的原始代码。通常，这将是明显的赢家。

但是，请注意，如果这是运行很长一段时间或无限长的时间，则这里可能存在性能问题。那是因为它建立了一个很长的 .

换句话说，只要还有更多的事情要做，每次 wait 解决时，都会有一个来自后续调用 wait 的新承诺，即使每个承诺几乎立即得到解决，它们都只在最后才得到 fulfilled 和相同的值（在本例中为 undefined ）！运行越长，当最后一个 promise 最终以 undefined 解决时，一次性卡顿就越大。

虽然浏览器可以优化它，但 none 今天会做 AFAIK。参见。

使用 setTimeout 运行大型任务而不阻塞输入，并使用 Promise 找出任务何时完成

Using setTimeout to run a large task without blocking input, and using Promise to find out when the task is complete

javascript

es6-promise

最佳性能解决方案

最惯用的解决方案

使用 setTimeout 运行 大型任务而不阻塞输入，并使用 Promise 找出任务何时完成

Using setTimeout to run a large task without blocking input, and using Promise to find out when the task is complete

javascript

es6-promise

最佳性能解决方案

最惯用的解决方案

使用 setTimeout 运行大型任务而不阻塞输入，并使用 Promise 找出任务何时完成