Question

当我运行以下代码（通过单击按钮）时：

const div = document.querySelector( "div" )
const button = document.querySelector( "button" )
button.addEventListener( "click", () => {
    console.log( 'clicked' );
    div.textContent = 'printing....';
    var delay = 3000 + new Date().getTime();
    while ( new Date().getTime() < delay ) { }
    console.log( 'after delay' );
} );

<button>Run</button>
<div></div>

div的内容在回调完成后显示，所以我先点击了第一个日志（“单击”），然后在3s延迟循环后单击了第二个日志（“ after delay”）和div内的文本。为什么 div.textContent ='正在打印......'; 在第一个console.log（）之后没有执行？非常感谢（我是编码和stackoverflow的新手，所以如果我不清楚或很傻，请原谅我）

Answer 1

Javascript是单线程的（大部分情况下）。您正在使用繁忙的循环锁定线程，因此浏览器将无法在您的功能完成之前用所做的更改来更新页面。

相反，您需要进行一些更改，然后设置超时，然后返回，以允许浏览器进行绘制。稍后，当超时结束时，您可以进行更多更改。

button.addEventListener( "click", () => {
  console.log( 'clicked' );
  div.textContent = 'printing....';
  setTimeout(() = > {
    console.log('after delay');
  }, 3000);
});

为什么以下代码按此顺序执行？

1 个答案: