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

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

const div=document.querySelector（“div”）
const button=document.querySelector（“按钮”）
按钮。addEventListener（“单击”，（）=>{
log（'clicked'）；
div.textContent='打印…'；
var delay=3000+新日期（）.getTime（）；
while（new Date（）.getTime（）
运行
Javascript是单线程的（大多数情况下）。您正在通过一个繁忙的循环锁定线程，因此在功能完成之前，浏览器将无法使用您的更改更新页面

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

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

因为渲染器依赖于事件循环。。。你通过使用while循环来阻止它运行。像这样的“延迟”循环绝对是个糟糕的主意。我认为你应该使用
setTimeout
。即使没有while循环，文本仍会在另一个console.log之后呈现，while循环只是让它变得引人注目。加起来，与DOM相关的
.textContent=
等操作是Web API的一部分，在当前执行上下文中，它不是立即可执行代码的一部分。所以，我们必须等待事件循环完成它的循环。