Question

我有一些昂贵的同步计算，所以我希望它不会阻塞线程。

因此，我试图将自己包装在一个承诺中，看看是否可以实现。但是不知何故它仍然阻塞了我的主线程。

从摘要中可以看到，只有在效果运行并且计算完成之后才能操作input。

问题

有可能实现吗？要在JavaScript中异步运行同步代码？

我知道您可以使用async await做相反的事情。即：同步运行异步代码（或至少看起来是同步的）。

function App() {

  const [inputValue,setInputValue] = React.useState('');
  const [someState,setSomeState] = React.useState('Some heavy computation is running...');

  React.useEffect(()=>{
    function someFunction() {
      return new Promise((resolve,request) => {
        let x = 0;
        for (let i = 0; i < 1500000000; i++){
          x = x + i;
        }
        resolve('I am done');
      });
    }
    
    someFunction()
    .then((data) => {
        setSomeState(data);
      }
    );

  },[]);

  return (
    <React.Fragment>
      <div>{someState}</div>
      <input value={inputValue} onChange={()=>setInputValue(event.target.value)}/>
    </React.Fragment>
  );

}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

有没有办法在Javascript中异步运行昂贵的同步计算代码？

0 个答案: