阻止代码

Question

＆＃13;

＆＃13;

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');
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

（jsFiddle）

这是时间表：

• 打印＆＃34;之前＆＃34;
• 等待2秒
• 打印＆＃34;＆＃34;
• 隐藏ID为＆＃39; panel1＆＃39;
的元素

为什么不是：

• 隐藏ID为＆＃39; panel1＆＃39;
的元素
• 打印＆＃34;之前＆＃34;
• 等待2秒
• 打印＆＃34;＆＃34;

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

Answer 1

您最好使用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>