javascript - 为什么下面的代码会按照这个顺序执行呢？

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的内容， 所以我点击第一个日志(“点击”)，然后在 3 秒延迟循环后点击第二个日志(“延迟后”)和 div 内的文本。 为什么 div.textContent = '正在打印......'; 在第一个 console.log() 之后没有执行？ 非常感谢(我是编码和 stackoverflow 的新手，所以如果我不清楚或愚蠢，请原谅我)

Answer 1

Javascript 是单线程的(大部分)。您正在使用繁忙的循环锁定线程，因此在您的函数完成之前，浏览器将没有机会使用您的更改来更新页面。

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

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