单线程如何阻止 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 中的单线程，并解释说只要将 setTimeout 添加到 longCB()，即使它被设置为 0 也可以使其工作。在查看事件循环/事件队列和调用堆栈后，我仍然完全困惑为什么这不起作用？不应该是行

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

甚至在调用 longCB() 之前完成？我错过了什么？先谢谢你了。

Answer 1

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

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

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

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

你说在调用 longCB() 之前将文本设置为 'hi' 你没有错，但是由于线程仍然是运行ning JS，页面不会'还没有重绘。使用 setTimeout 只需将方法调用添加到未来某个时刻要做的事情的堆栈上，浏览器就可以保证在同步脚本结束和处理事件或超时之间呈现。

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

How does single threading block DOM manipulation in JavaScript?

javascript

single-threaded