Разве $ .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 немедленно или нет?

Да.Немедленно.

Когда он обновляется?

Свойство / атрибут DOM обновляется немедленно, вы можете сразу прочитать измененное значение.Но рендеринг пользовательского интерфейса может отложить до конца кода JavaScript (рендеринг пользовательского интерфейса не имеет значения).

Как я могу сделать так, чтобы оно обновлялось явно?

Вам не нужно.

Наконец, где я могу прочитать об этом?

Ну ... Я думаю, что стандарты 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"))

возвращает false