JavaScript functions not executed in the right order with sleep

Question

I want to hide an element, and display a new element after one second,

here's the simplified code :

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}



function loadNewSubmenu()
{
    document.getElementById("content-1").className = "hide-part";
    sleep(1000);
    document.getElementById("content-2").className = "show-part";
}

.hide-part{
  display : none;
}

<button id="content-1" class="show-part">B1</button>
<button id="content-2" class="hide-part">B2</button>
<button onclick="loadNewSubmenu()">click me</button>

What I expected :

Hide the element #content-1
Wait one second
Show the element #content-2

But this is what i got :

One second wait
Element #content-1 changed
Element #content-2 changed

I know that I can use setTimeout to fix it, but what's the reason behind this behavior?

Don't use `sleep` but `setTimeout`. And you have two elements with same ID, that's wrong. — Oen44, May 13 '17 at 10:02
Possible duplicate of [What is the JavaScript version of sleep()?](http://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep) — Andreas, May 13 '17 at 10:04
Possible duplicate of [Reveal a div after x seconds, and reveal another div after y seconds](http://stackoverflow.com/questions/18808383/reveal-a-div-after-x-seconds-and-reveal-another-div-after-y-seconds) or [CSS Auto hide elements after 5 seconds](http://stackoverflow.com/questions/21993661/css-auto-hide-elements-after-5-seconds) — Aria, May 13 '17 at 10:06
@Andreas Actually I just want to know why JavaScript execute `sleep()` first, then the `document.getElementById().classname`, I misasked the question — Pascal Goldbach, May 13 '17 at 10:17
@Aria I misasked the question, I wanted to know why JavaScript execute sleep() first, then the document.getElementById().classname — Pascal Goldbach, May 13 '17 at 10:20
You tell the browser to remove a class which requires an update/redraw of the DOM. But this update is blocked by your `sleep()`. The browser is only able to update the DOM after he finished the `sleep(1000)`. Just use a correct implementation as mentioned in the duplicate. — Andreas, May 13 '17 at 10:21
@PascalGoldbach, You should never use sleep in UI thread,it blocks the ui thread. — Aria, May 13 '17 at 10:25

score 1 · Answer 1 · answered May 13 '17 at 10:09

You can use setTimeout(); Here is an exemple :`

<script>
    function loadNewSubmenu()
        {
            document.getElementById("content-1").className = "hide-part";

            setTimeout(function(){
                document.getElementById("content-2").className = "show-part";
            },1000);
        }
</script>`

prasanth · Answer 2 · 2017-05-13T10:14:09.623

simply use setTimeout()

function loadNewSubmenu() {
  document.getElementById("content-1").className = "hide-part";
  setTimeout(function() {
    document.getElementById("content-2").className = "show-part";
  }, 1000)
}

.hide-part {
  display: none;
}

<button id="content-1" class="show-part">B1</button>
<button id="content-2" class="hide-part">B2</button>
<button id="content-1" onclick="loadNewSubmenu()">click me</button>

score 0 · Accepted Answer · answered May 13 '17 at 10:09

use setTimeout instead of sleep

function loadNewSubmenu()
{
    document.getElementById("content-1").className = "hide-part";
    setTimeout(function(){  document.getElementById("content-2").className = "show-part"; },1000);
   
}

.hide-part{
  display : none;
}

<button id="content-1" class="show-part">B1</button>
<button id="content-2" class="hide-part">B2</button>
<button id="content-3" onclick="loadNewSubmenu()">click me</button>

JavaScript functions not executed in the right order with sleep

3 Answers3