0

I am new to JS, have a javascript code snippet below:

<script type="text/javascript">
var eatSteak = confirm ("Do you eat steak?");
if (eatSteak) {
    document.write("Here's a Steak!");
}else{
    document.write("Here's a Tofo!");
}
var happy = prompt ("Are you happy?");
</script>

When I debug the code in chrome, I see after give yes to confirm pop-up. It hits the code "document.write("Here's a Steak!");", and HTML page display "Here's a Steak!", then code hit prompt pop-up.

Very confusing for me is when I run it in chrome, "Here's a Steak!" will only display after prompt pop-up. Seems document.write only take effects after javascript code execution? Or HTML start rendering the page after javascript? I googled but cannot find a similar question or answer.

Richard
  • 34
  • 1
  • 10
  • *"when I run it in chrome, "Here's a Steak!" will only display after prompt pop-up."* - Do you mean it only displays after the *second* ("Are you happy?") prompt? In a general sense the browser won't repaint the screen while JS is running. – nnnnnn Feb 24 '17 at 22:14
  • 1
    If you are new at javascript, then stay away from `document.write`, as it has [many pitfalls](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice), just learn how to work with manipulating the DOM – Icepickle Feb 24 '17 at 22:14
  • Well the confirm is asking you to confirm - why do you think it should write anything before that? How can the code know what you will choose? – StudioTime Feb 24 '17 at 22:14
  • @nnnnnn, yes, I feel like the the page render after the second prompt – Richard Feb 24 '17 at 22:17
  • It is the nature of a single threaded javascript model. As a prompt, alert, etc stops the execution until you make a decision, any of the DOM manipulations you made before, wait until you are out of the current scope. This can be different in different browsers, but that depends on how document.write is implemented – Icepickle Feb 24 '17 at 22:18
  • @DarrenSweeney, for the confirm pop up, I click yes, and then I see it hit document.write("Here's a Steak!"); when debug. But when run, it isn't displayed before var happy= prompt... – Richard Feb 24 '17 at 22:19

1 Answers1

1

It is the nature of a single threaded javascript model. As a prompt, alert, etc stops the execution until you make a decision, any of the DOM manipulations you made before, wait until you are out of the current scope. This can be different in different browsers, but that depends on how DOM manipulation is implemented.

The following script below would block the red color until you click OK (at least on Chrome, on Firefox I was suprised to see it didn't work :D)

The setColor to green does the manipulation and then starts a timer to show the alert at the next possible time using setTimeout. This will make sure green is set before the alert is shown (in any browser)

// blocking call until it exits the function (at least, on Chrome, firefox seems to work)
function setColorToRed() {
  document.body.style.background = 'red';
  alert('Red will come after ok');
}

// none blocking call, works on all browsers
function setColorToGreen() {
  document.body.style.background = 'green';
  setTimeout(function() {
    alert('Green color should have been set');
  }, 0);
}
<button type="button" onclick="setColorToRed()">Blocking call red</button>
<button type="button" onclick="setColorToGreen()">None blocking call green</button>
Icepickle
  • 12,014
  • 3
  • 29
  • 43
  • thanks for your link of pitfalls and the code snippet. So seems like when JS see DOM manipulations like document.write, it won't invoke immediately, will wait and see if has prompt/alert after it? If has, document.write will wait until prompt exit. And I also test your code in IE, red doesn't block. – Richard Feb 24 '17 at 22:41
  • @Richard Actually the code should stop at an alert/confirm until the user makes an action (closing the dialog, clicking ok or cancel). Once the execution can continue, the browser will handle the pending changes in its queue. Thanks for testing it IE, don't have Windows on my home pc :) – Icepickle Feb 24 '17 at 22:58