Question

在ReactJs应用程序中，我有一个正在执行大量计算的组件，并希望在完成这些计算时显示加载的gif。我尝试通过以下两种方式在组件中创建异步函数：

<activity
  android:name=".MainActivity"
  android:configChanges="orientation|screenSize" />

compute = async (data)=>{
    var promise = new Promise((resolve, reject)=> {
          var tensor =  tf.tensor(tokens, [1,100])
          console.log("start prediction")
          var prediction=this.model.predict(tensor); // this is the heavy computation
          prediction.data().then((result)=>resolve(result))     
      });
    return promise 
}

当用户单击按钮时，将调用此函数：

compute = async (data)=>{
    var tensor =  tf.tensor(tokens, [1,100])
    console.log("start prediction")
    var prediction=this.model.predict(tensor); // this is the heavy computation
    return prediction.data()  
}

我的问题是（使用异步功能的两个版本）在完成计算后，应显示的gif被冻结，并且不显示动画。我以为异步模式足以在后台执行计算而不会阻塞DOM。

如果不是这种情况，我该如何解决我的问题？我需要将计算结果放在单独的工作程序中吗？

ReactJS中的异步函数阻止组件

0 个答案: