JavaScript behaviour with blocking code

Question

function simulateComplexOperation(sleepDuration) {
  var now = new Date().getTime();
  while (new Date().getTime() < now + sleepDuration) { /* do nothing */ }
}

function testFunction() {
  document.getElementById('panel1').style.display = 'none';
  console.log('before');
  simulateComplexOperation(2000);
  console.log('after');
}

<div id='panel1'>
  text to hidden
</div>

<button onclick="testFunction()">Hide</button>

(jsFiddle)

This is the timeline:

Prints "before"
wait 2 seconds
Prints "after"
hide element with id 'panel1'

Why is it not:

hide element with id 'panel1'
Prints "before"
wait 2 seconds
Prints "after"

Is there a way to force a style change operation to be the first?

Use [WebWorkers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) to do background work. — Phylogenesis, Aug 18 '17 at 11:47
Take a look at this answer: https://stackoverflow.com/a/37092024/3865670 — Mekicha, Aug 18 '17 at 12:18

score 0 · Answer 1 · answered Aug 18 '17 at 12:37

You would preferably use setTimeout. But it's caused by the scheduling of the code by the browser.

function simulateComplexOperation(sleepDuration) {
  var now = new Date().getTime();
  while (new Date().getTime() < now + sleepDuration) { /* do nothing */ }
}

function testFunction() {
  document.getElementById('panel1').style.display = 'none';
  console.log('before');
  setTimeout(() => {
    console.log('after');
  }, 2000);
}

<div id='panel1'>
  text to hidden
</div>

<button onclick="testFunction()">Hide</button>

JavaScript behaviour with blocking code

1 Answers1