javascript - 使用 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 必须返回一个 bool 值，表示是否继续执行该操作。 throttle 值用于将 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 垃圾，但有一个干净的替代方案。

最惯用的解决方案

使用 promise 返回的 wait 帮助器来驯服 setTimeout，在整个过程中使用 promise :

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>

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

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

换句话说，只要还有更多要做的事情，每次 wait 解析时，都会从后续调用 wait 中获得一个新的 Promise，即使每个 Promise几乎立即得到解决，它们都在最后才得到 fulfilled 以及相同的值(在本例中为 undefined)!运行的时间越长，当最后一个 Promise 最终以 undefined 解决时，一次性卡顿可能就越大。

虽然浏览器可以对此进行优化，但据我所知，目前还没有浏览器这样做。请参阅long discussion here .