javascript - How to make the HTML renders before the alert is triggered?

Question

The question is actually quite simple. How do I make the div's content change before the alert shows up?

JSFiddle:

https://jsfiddle.net/n2n5drL2/1/

HTML:

<div id="test">
Some Text
</div>
<button id="change">
change
</button>

JavaScript:

$('#change').click(function(){
  $('#test').text('new content');
  alert('how to make this alert shows after the div changes its content?')
})

Answer 1

You need to defer execution of the blocking alert so the browser can re-render the changed DOM. You can do this with setTimeout and a 0ms timeout:

$('#change').click(function(){
  $('#test').text('new content');
  setTimeout(function() {
    alert('how to make this alert shows after the div changes its content?')
  },0);
})

---

It is worth noting, however, that the specification for alert says to only

Optionally, pause while waiting for the user to acknowledge the message.

So while I've personally never seen a user-agent treat it as non-blocking, the specification does allow for it.