Компонент асинхронной блокировки функций в ReactJS - PullRequest
Новая
       16

Компонент асинхронной блокировки функций в ReactJS

1 голос
/ 17 мая 2019

В приложении ReactJs у меня есть компонент, который выполняет тяжелые вычисления, и я хочу отобразить загрузочный GIF во время этих вычислений.Я попытался создать асинхронную функцию в компоненте следующими двумя способами: 

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()  
}

Эта функция вызывается, когда пользователь нажимает кнопку: 

onClickCompute=()=>{
    this.setState({ loading: true },()=>{
        this.compute(data).then((data)=>{
          this.setState({result:data,loading:false})
        })
     });
}

Моя проблемаявляется (с обеими версиями для асинхронной функции), что, пока вычисления сделаны, gif, который должен отображаться, заморожен и не показывает анимацию.Я предполагал, что асинхронного шаблона достаточно для выполнения вычислений в фоновом режиме без блокировки DOM.

Если это не так, как я могу решить мою проблему?Нужно ли помещать вычисления в отдельного работника?

...