为什么jQuery在函数执行期间等待更新DOM？答案

【问题标题】：Why does jQuery wait to update the DOM during function execution?为什么jQuery在函数执行期间等待更新DOM？
【发布时间】：2018-08-22 08:44:35
【问题描述】：

在更新 DOM 之前，我遇到了 jQuery 等待其他 javascript 执行的问题。在下面的示例代码中，h1 元素在调用 SlowUpdate 函数后超过 5 秒不会更新。我正在使用 chrome，但在 IE 中观察到同样的问题。我知道它与控制台日志记录并不严格相关，因为我的实际项目没有将文本记录到控制台。相反，这个问题似乎与执行其余函数所需的时间有关。

任何指向此行为或潜在解决方案的详细解释的链接将不胜感激！

HTML：

<!DOCTYPE html>
<html>
<!--Load jQuery libraries-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!--Load Javascript functions-->
<script src="Scratch.js" type="text/javascript" name="ScratchJS"></script>
<body>
  <h1>Hello Change?</h1>
</body>
</html>

Javascript：

$(document).ready(function () {
    $("h1").click(function () {
    SlowUpdate();
  });
});

function SlowUpdate() {
  // This change isn't made before moving into the loop
  $("h1").text("Change Complete");

  // Take a bunch of time doing stuff
  var i = 0;
  while(i < 100000) {
    console.log(i);
    i++;
  }
}

【问题讨论】：

jQuery 立即更新 DOM。在 Javascript 完成之前，浏览器不会对 DOM 进行更改。

标签： jquery dom

【解决方案1】：

jQuery 没有等待更新 DOM，主线程（UI 线程，执行 JavaScript 的同一线程）被阻塞，因为它正忙于运行循环。

继续，在控制台中运行它，你会发现这不是 jQuery 特定的问题：

(function() {
   document.body.innerHTML = 'test';
   var i = 0; while(i < 1000000000000) { i++; }
}());

【讨论】：

【解决方案2】：

为了解释，我找到了这个answer 以及类似问题的其他解决方案。

一个潜在的解决方案：

$(document).ready(function () {
  $('h1').on('mousedown', function() {
    $("h1").text("Change Complete");
  })
  $("h1").on('mouseup', function () {
    SlowUpdate();
  });
});

function SlowUpdate() {
  // Take a bunch of time doing stuff
  var i = 0;
  while(i < 100000) {
    console.log(i);
    i++;
  }
}

【讨论】：

非常感谢。我希望我在环顾四周时找到了那个帖子。