title: How to update DOM during a async call
body: <p>If I have a async function as below</p>
  
  <pre><code>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 &lt; 100; i++) {
       const model = await tf.loadModel('model.json');
       $("#loading").html("more updates") //doesn't happen
    }
    ...
    &lt;more code&gt;
    ...
  }
  </code></pre>
  
  <p>the second and third update don't happen until after the entire code block is completed. I saw online that it would be possible to fix this by wrapping the function in a <code>setTimeout</code>, however this doesn't work for me either:</p>
  
  <pre><code>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 &lt; 100; i++) {
       const model = await tf.loadModel('model.json');
       $("#loading").html("more updates") //doesn't happen
    }
    ...
    ...
    &lt;more code&gt;
    ...
  }
  </code></pre>
  
  <p>Any idea how I can achieve this?</p>