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.

Answer 2

Delay the alert by using a setTimeout so that the page has time to re-draw. When you use alert all script execution is halted on the page (eg: the page is basically frozen). But when you call $.text() the actual painted data of the text won't be updated until the next paint call done by the browser.

Actually, by using text you also trigger the layout phase of re-rendering the page. So, what happens in this case is you update the text value of that DOM node and the browsers will try to update the graphically displayed data when it is "free", but because you trigger an alert immediately the browser won't be free until you close that alert. By using the setTimeout you make sure that the browser is "free" before showing the alert so the text data can be updated.

Read this to understand more about how browsers render the page: https://developers.google.com/web/fundamentals/performance/rendering/

DEMO: https://jsfiddle.net/n2n5drL2/3/

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

Answer 3

You need to wait at least 1 ms after you change the content:

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

Answer 4

It should by default, but if not, then set a timeout using settimeout

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  Some Text
</div>
<button id="change">
  change
</button>