$ .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？

是。立即。

2. 什么时候更新？

DOM的属性/属性立即更新，您可以立即读取更改后的值。但UI呈现可能会延迟到JavaScript代码的末尾（UI呈现无关紧要）。

3. 如何明确更新？

你不需要。

4. 最后，我在哪里可以读到这个？

嗯......我认为DOM / ES标准可能包含这些内容。

你可以考虑设计的“正确行为”：谁能承受那些无法立即读取变化值的奇怪行为？一定是疯了。所以你的浏览器总能做正确的事情。 ：d

5. 在这里看你的演示，没有任何问题（如果它不起作用，这是你的浏览器的问题，可能是错误的版本，或由一些错误的插件引起）

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>

Answer 2

你的代码应该按预期执行，它没有明显的问题，但是这可能会产生问题

当你执行addClass时，它会触发一个甚至更新class =''属性并删除你的className，这就是为什么这个条件

($item.hasClass("className"))

返回false