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

我希望我的标题是正确的。我今天参加了一次采访，被一个关于事件循环/单线程的问题难住了。代码如下：

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

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

---

甚至在调用longCB（）之前都要完成吗？我错过了什么？感谢您的高级支持。

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

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

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

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

---

在调用

longCB（）

之前将文本设置为“hi”并没有错，但由于线程仍在运行JS，因此页面还不会被重新绘制。使用

setTimeout

只需在将来的某个时间点添加一堆要执行的操作的方法调用，并且浏览器保证在同步脚本结束和处理事件或超时之间进行渲染。

Wow非常感谢。我真的很感激。我将进一步研究它，但你能解释一下线程到底是什么吗？单线程是块范围吗？我刚刚看了Philip Roberts在事件循环上的基调演讲。我现在意识到有一个render que，它只能在调用堆栈清除时运行。由于longCB（）位于调用堆栈上，浏览器从不使用文本“hi”呈现#状态。非常感谢在编程语言中，线程或进程通常意味着在代码中移动的单个“光标”，而不是同时运行的多段代码。不要弄糊涂了，线程还可以引用操作系统管理的内存块和处理器时间。例如，Chrome的每个选项卡都有不同的流程，这可以在任务管理器中看到。而处理器可以有多个内核，有时称为线程。想想看，这是一个非常松散的术语。

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