$.addClass 不会立即更新 DOM？

Question

Consider the following snippet.

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
  }

};

I am not asking how to get around this. That would be plain obvious: to pass the reference to the $item to the bar function.

I am asking if jQuery:

1. Does or does not update the DOM immediately?

2. When does it update?

3. How can I make it update explicitly?

4. Finally, where can I read about this?

Answer 1

1. Does or does not update the DOM immediately?

Yes. Immediately.

2. When does it update?

The property/attribute of the DOM is updated immediately, you can read the changed value immediately. But the UI rendering may delay to the end of the JavaScript code (UI rendering doesn't matter).

3. How can I make it update explicitly?

You don't need to.

4. Finally, where can I read about this?

Well ... I think the DOM/ES standards may contain these contents.

And you can think about the "correct behavior" of a design: who can bear the strange behavior that can not read the changed value immediately? It must be crazy. So your browser always do the right things. :D

5. See your demo here, works without any problem (if it doesn't work, it is your browser's problem, maybe buggy version, or caused by some buggy plugins)

 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

your code should perform as expected, there's no apparent problem with it, but here's the thing that might be creating problems

when you do addClass, it triggers an even that updates the class='' attribute and removes your className, which is why the condition

($item.hasClass("className"))

returns false