javascript - $.addClass 不会立即更新 DOM 吗？

Question

考虑以下代码段。

function foo(event) {
  var $item = $(event.target);
  $item.addClass("className");
  bar(event);
};

function bar(event) {
  var $item = $(event.target);

  // The following return false
  if ($item.hasClass("className")) {
    // flow of control does not enter
  }

};

我不是在问如何解决这个问题。这很明显:将对 $item 的引用传递给 bar 函数。

我问如果 jQuery:

1. 是否立即更新 DOM？

2. 什么时候更新？

3. 如何让它显式更新？

4. 最后，我在哪里可以读到这方面的信息？

Answer 1

1. 是否立即更新 DOM？

是的。立即。

1. 什么时候更新？

DOM的property/attribute是立即更新的，你可以立即读取更改后的值。但是 UI 渲染可能会延迟到 JavaScript 代码的末尾(UI 渲染无关紧要)。

1. 如何让它明确更新？

你不需要。

1. 最后，我可以在哪里阅读相关信息？

嗯……我觉得DOM/ES标准可能包含这些内容。

而你可以想想一个设计的“正确行为”:谁能忍受不能立即读取改变值的奇怪行为？一定是疯了。所以你的浏览器总是做正确的事情。 :D

1. 在这里查看你的演示，没有任何问题(如果不起作用，那是你的浏览器的问题，可能是有问题的版本，或者是由一些有问题的插件引起的)

function foo(event) {
  var $item = $(event.target);
  $item.addClass("className");
  bar(event);
};

function bar(event) {
  var $item = $(event.target);
  if ($item.hasClass("className")) {
    $("#output").text("className changed!")
  }

};

$(function(){
  $("#test").on("click", foo);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="test">click me</button>
<div id="output">hello</div>