Question

我正在尝试在JavaScript中进行一些繁重的计算。我目前正在使用React和Redux。

使用某些库（如fetch或jQuery ajax请求）执行获取或服务器请求是正常工作异步，但我无法使用自己的JavaScript函数在客户端进行异步计算。

使用setTimeout在React组件componentDidMount函数中执行此操作会阻止我的UI：

componentDidMount () {
   setTimeout(function() {
      ... do heavy calculations
   }, 0)
}

或在这样的调度操作中（我正在使用redux-thunk）：

heavyCalculationsAction: () => {
   return dispatch => {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
           ... perform heavy calculations here
           resolve(data)
        }, 0)
      }).then((data) => {
          distpatch(computationsDone(data))
      })
   }
}

在两种情况下，UI都会冻结，直到计算完成。

也许我应该用网络工作者或其他东西接近这个，因为我无法让setTimeout释放我的UI线程。

Answer 1

Javascript是单线程的，通常在UI线程中运行。 setTimeout不会在后台线程中运行代码，因此它运行的任何内容都会阻止您的UI。

要做大量的工作，你需要使用web worker（在一个单独的非UI线程中运行），或者你需要将你的工作分解成更小的块，并且只能在一次传播时做一点点工作通过使用setTimeout或requestIdleCallback计划每个块来随时间推移。

React JS异步繁重计算

1 个答案: