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：

是否立即更新DOM？
何时更新？
如何使其显式更新？
最后，我在哪里可以读到这个？

Answer 1

是否立即更新DOM？

是的。立即。

何时更新？

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

如何使其明确更新？

您不需要。

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

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

您可以考虑设计的“正确行为”：谁能忍受无法立即读取更改值的奇怪行为？一定是疯了。因此，浏览器始终会做正确的事情。：D

在这里查看您的演示，可以正常工作（如果不起作用，可能是浏览器的问题，可能是错误的版本，或者是由错误的插件引起的）

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"))

返回假

$ .addClass是否不立即更新DOM？

2 个答案: