javascript - 如何在 Meteor/JavaScript 客户端中运行解锁后台任务？

Question

我想在 Meteor 客户端上运行一个任务，该任务在后台消耗资源，并同时保持界面对用户的响应。该任务执行一些数学运算(例如查找素数，如下所述: https://stackoverflow.com/a/22930538/2543628 )。

我尝试遵循 https://stackoverflow.com/a/21351966 中的提示但界面仍然总是“卡住”，直到任务完成。

setTimeout、setInterval 和我当前方法中的那些包也没有帮助:

var taskQueue = new PowerQueue();
taskQueue.add(function(done) {
    doSomeMath();
    // It's still blocking/freezing the interface here until done() is reached
    done();
});

我可以做一些事情来让界面在 doSomeMath() 运行期间做出响应吗？还是我做错了什么(而且看起来在 PowerQueue 中你也没有什么可以做错的事情)？

Answer 1

解决异步排队问题的 JavaScript 库，假设正在排队的任务在并发但单线程的环境中运行，例如 Node.js 或浏览器。但是，在您的情况下，您需要的不仅仅是并发性 - 您需要多线程执行，以便将 CPU 密集型计算移出 UI 线程。这可以通过 web workers 来实现。请注意，仅 modern browsers 中支持 Web Worker。 ，所以如果您不关心 IE9，请继续阅读。

上面的文章应该足以帮助您入门，但值得一提的是，工作脚本需要保留在应用程序树之外，这样它就不会被捆绑。一个简单的方法是将其放入 public 目录中。

这是一个简单的示例，其中我的工作人员计算斐波那契数列(效率低下):

public/fib.js

var fib = function(n) {
  if (n < 2) {
    return 1;
  } else {
    return fib(n - 2) + fib(n - 1);
  }
};

self.addEventListener('message', (function(e) {
  var n = e.data;
  var result = fib(n);
  self.postMessage(result);
  self.close();
}), false);

客户端/app.js

Meteor.startup(function () {
  var worker = new Worker('/fib.js');
  worker.postMessage(40);
  worker.addEventListener('message', function(e) {
    console.log(e.data);
  }, false);
});

当客户端启动时，它会加载工作线程并要求其计算序列中的第 40 个数字。这需要几秒钟才能完成，但您的 UI 应保持响应。返回值后，应将 165580141 打印到控制台。