-1

Trying to sleep code flow in this way (instead of setTimeOut) for experiment

var div = document.getElementById("algo-code");

div.innerHTML += "<p>Extra stuff1</p>";

// works like sleep in php
for (var i = 0; i < 1000000; i++) {
}

div.innerHTML += "<p>Extra stuff2</p>";

It adds two paragraphs to div simultaneous, but when I put console.log instead of div.innerHTML it works synchron, sleeps some time before printing second console.

What is going on actually ?

Tigran Babajanyan
  • 1,967
  • 1
  • 22
  • 41
  • 3
    You really need to read about timers. Specifically [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) – Rory McCrossan Jun 13 '18 at 15:01
  • Every bit of this **is** synchronous. There is no need to *make* it synchronous. – Taplar Jun 13 '18 at 15:01
  • 1
    The compiler might be optimizing out your `for(){}` blocks when not in console – JonSG Jun 13 '18 at 15:03
  • Please when you downwoting specify the reason, otherwise it interfere to find a solution – Tigran Babajanyan Jun 13 '18 at 15:06
  • You've asked how to make this logic synchronous, yet none of it is asynchronous. So the question needs further clarification as to what *actual* problem you are seeing and what you want to achieve. Because the description does not make sense. – Taplar Jun 13 '18 at 15:09
  • @Taplar it prints the result not in time visually with innerHTML, so please suggest a solution if you can or if you understand me but think my description is incorrect please suggest an edit – Tigran Babajanyan Jun 13 '18 at 15:12
  • @Taplar, I believe the desired effect is a pause between updates. That pause does not appear to happen. The OP believes that it might be because the `for` statements happen asynchronously and hence the question. – JonSG Jun 13 '18 at 15:14
  • Take a look at JonSG's answer below. What you are actually asking for is to be able to see the DOM update between delays. When javascript updates the DOM, the browser has to be given a chance to redraw. This can be hindered by javascript continually running. Using logical constructs such as setTimeout introduce a way to provide the delay, and while the script is deferred, the browser will have a chance to redraw. The point should be made that, to you, this appears to be asynchronous because you see your changes happen all at once, but it is not asynchronous. – Taplar Jun 13 '18 at 15:14
  • 1
    Which given that that is the question, there should definitely be a duplicate question around some where. – Taplar Jun 13 '18 at 15:18
  • If I will use setTimeout then I will see second text after 1000 ms(for example) but again toghether with first text, I have undetected count of rows like that and if my writen code will work like I want then texts will print each after preview 1000 ms later – Tigran Babajanyan Jun 13 '18 at 15:26
  • It sounds then like you might want a setTimeout promise chain: https://stackoverflow.com/questions/39538473/using-settimeout-on-promise-chain – JonSG Jun 13 '18 at 17:57

1 Answers1

1

My best guess as to why it seems to work "better" or "as you expect" in the console is that the optimizer is not as aggressive on console js, but recognizes that your for() blocks do nothing and ignores them when not in console. Alternatively, the loops may be so tight that painting does not happen.

In any case, as suggested, your really want to look at setTimeout():

setTimeout(function(){
  var div = document.getElementById("algo-code");
  div.innerHTML += "<p>Extra stuff1</p>";
  
  setTimeout(function(){ div.innerHTML += "<p>Extra stuff2</p>";}, 1000);
}, 1000);
<div id="algo-code">......</div>
JonSG
  • 10,542
  • 2
  • 25
  • 36
  • I know about setTimeout, but If I say "Assume I have a code like this" its mean I need a solution for concrete situation, my code is complex and there is a reason to not use setTimeout – Tigran Babajanyan Jun 13 '18 at 15:17