Question

我在更新DOM之前遇到jQuery等待执行其他javascript的问题。在下面的示例代码中，在调用SlowUpdate函数后，h1元素不会更新> 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++;
  }
}

Answer 1

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

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

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

Answer 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++;
  }
}

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

2 个答案: