阻止代码的JavaScript行为

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)

这是时间表：

>打印“之前”
>等2秒
>打印“之后”
>隐藏id为’panel1’的元素

为什么不是：

>隐藏id为’panel1’的元素
>打印“之前”
>等2秒
>打印“之后”

有没有办法强制样式更改操作成为第一个？

解决方法

您最好使用setTimeout.但这是由浏览器调度代码引起的.

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>