javascript - 单线程如何阻止 JavaScript 中的 DOM 操作？

Question

我希望我的标题是正确的。我今天参加面试，被一个有关事件循环/单线程的问题难住了。这是代码:

function longCB(){
    for (var i = 0; i <= 9999; i++){
    console.log(i);
  }
  $('#status').text('hello')
}

$('#status').text('hi')
longCB();

问题是为什么 DOM 永远不会在 #status div 上显示“hi”？完全被难住了，面试官解释说这是因为 javascript 中的单线程，并解释说只要在 longCB() 中添加一个 setTimeout，即使它被设置为 0 也会让它工作。在查看了事件循环/事件队列和调用堆栈之后，我仍然完全困惑为什么这不起作用？不应该是行吗

$('#status').text('hi')

在调用 longCB() 之前就完成了吗？我缺少什么？提前谢谢您。

Answer 1

这是因为单线程也被浏览器的渲染引擎共享。只要 JS 同步运行，屏幕上的页面就不会更新。为什么？好吧，假设您有以下代码:

elem.style.color = 'red';
elem.style.opacity = '1';
elem.textContent = 'Hello';

您不希望元素以红色显示旧文本，然后使其更加不透明，然后将文本更改为 Hello。您只希望文本立即更改并变为红色且不透明。这也是为什么只有所有JS运行完才进行渲染的原因之一。另一个原因与性能有关。渲染需要时间!

$('#status').text('hi')
longCB();

当你说在调用longCB()之前将文本设置为“hi”时，你并没有错，但由于线程仍在运行JS，页面不会被重绘然而。使用 setTimeout 只需将方法调用添加到将来某个时刻要做的事情堆栈上，并且保证浏览器在同步脚本结束和处理事件或超时之间进行渲染。