some kind of caching in google chrome?

Question

i have simple question, the following code show some button ("press") and ask the user "how old are you?" if the user answer number greater than 20, the code write to the page "nice". The question is in a loop so the code ask 7 times this question.

The issue ( my question) is : the "nice" appears AFTER the loop is finished, why? it is like some caching. why it does not appears when the command "document.writeln("nice") is execute?

This phenomenon is just when i run it from chrome, it does not happen in EDGE or IE. what can i set in CHROME that this kind of CACHING will not occur? thanks

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script>
 function run() 
 {
    var i = 1;
 var x = 0;
 while (i<8)
 {
   x = window.prompt(i+ " how old are you  ");
   if (x>20)
   {
      document.writeln("nice" + " " + i + "<br>");
    }
   i = i+1;
 }
 
 }
</script>

</head>
<body>
<input type="button" value="press" onclick="run()">
</body>
</html>

Hi, thanks for all of you !!! i teach javascript and html in grade 8. the goal here was to teach 'while' loop. the question was different ( i adapt it for he snippet) we use notepad++ and chrome. the issue was to show the students question and response in a loop . i did not know that chrome keep the 'document.writeln()' until finish handling the onclick event, ( i think that there is simple solution that i can show the student. settimeout is too complicate for them now). thanks again. — nirselickter, May 05 '17 at 08:53

score 0 · Answer 1 · answered May 05 '17 at 06:42

0

Add a break; to exit the loop if the number is greater than 20.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script>
 function run() 
 {
    var i = 1;
 var x = 0;
 while (i<8)
 {
   x = window.prompt(i+ " how old are you  ");
   if (x>20)
   {
      document.writeln("nice" + " " + i + "<br>");
             break;
    }
   i = i+1;
 }
 
 }
</script>

</head>
<body>
<input type="button" value="press" onclick="run()">
</body>
</html>

answered May 05 '17 at 06:42

sknt

963
6
16

That doesn't follow his intended behaviour though. – captncraig May 05 '17 at 06:54
I think his problem was that the loop didn't exit after entering a number >20 in chrome and kept asking for the age (which is weird behaviour for an age check). After adding `break` the age check behaves as expected in chrome. But I might have misunderstood the problem - Let's just wait for a response from the OP. – sknt May 05 '17 at 07:03
He said it should ask 8 times. It doesn't make sense, but it does demonstrate a key difference between chrome and firefox. – captncraig May 05 '17 at 07:05
`if the user answer number greater than 20, the code write to the page "nice". The question is in a loop so the code ask 7 times this question.` - That doesn't really state that it's required to ask 7 times. You probably focused on `the "nice" appears AFTER the loop is finished,` a bit more than i did. – sknt May 05 '17 at 07:26
Well that is the only thing I found to be inconsistent across browsers, so I focused on that. – captncraig May 05 '17 at 08:09

score 0 · Answer 2 · edited May 23 '17 at 10:31

I believe this is a result of different browsers having different behavior with when and how they allow the document.write call to change the DOM.

It looks like firefox changes the document right away, and chrome waits for the currently executing function to finish before making the change.

There is pretty widespread advice to avoid document.write altogether. See https://stackoverflow.com/a/25398255/121660 for a pretty good explanation.

Changing your snippet to use:

document.body.innerHTML+="nice <br/>" instead of document.write Doesn't really fix it for me either. Odd.

Using setTimeout(function(){document.write("nice")},0) also doesn't work for me.

score 0 · Answer 3 · answered May 05 '17 at 07:10

This works for me in all browsers. The key is to not let the function run for a long, long time, but to let the browser have a break to do things like redraw the document. setTimeout(xxx,0) means "run this thing as soon as you can get it scheduled to run again", and the browser can update things in-between.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script>
 
 function run(i) 
 {
   if (i >= 8){return;}
   var x = window.prompt(i+ " how old are you  ");
   if (x>20)
   {
     document.writeln("nice" + " " + i + "<br>");
   }
   setTimeout(function(){run(i+1)},0)
 }
</script>

</head>
<body>
<input type="button" value="press" onclick="run(1)">
</body>
</html>

some kind of caching in google chrome?

3 Answers3