javascript - 如何在异步调用期间更新 DOM

Question

如果我有一个如下的异步函数

async function predict_from_model() {
  $("#loading").html("first update")
  const model = await tf.loadModel('model.json');
  $("#loading").html("second update") //doesn't happen
  for (var i = 0; i < 100; i++) {
     const model = await tf.loadModel('model.json');
     $("#loading").html("more updates") //doesn't happen
  }
  ...
  <more code>
  ...
}

直到整个代码块完成后才会发生第二次和第三次更新。我在网上看到可以通过将函数包装在 setTimeout 中来解决此问题，但这对我来说也不起作用:

async function predict_from_model() {
  $("#loading").html("first update")
  const model = await tf.loadModel('model.json');
  setTimeout(function() {
      $("#loading").html("loaded") //doesn't happen
  }, 0);
  for (var i = 0; i < 100; i++) {
     const model = await tf.loadModel('model.json');
     $("#loading").html("more updates") //doesn't happen
  }
  ...
  ...
  <more code>
  ...
}

知道如何实现这一目标吗？

Answer 1

jquery dom 操作不应该因为函数的恢复而停止。这是一个快速(但肮脏)的片段，它表明:

var hardWork = function() {
  return new Promise((resolve, reject) => {
    setTimeout(_ => { 
      console.log("hardwork over")
      resolve();
    }, 2000)
  })
}

async function dom() {
  $("#loading").html('Loading')
  $('#status').html('Loading at ' + new Date())
  
  await hardWork();
  $('#status').html('Loading at ' + new Date())
  $("#loading").html('Loading 2')
  
  await hardWork();
  $('#status').html('Loading again at ' + new Date())
  $("#loading").html('Loading 3')

}
dom();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="status">

</p>
<p id="loading">

</p>