Код не работает по порядку?Обновления DOM происходят все сразу?

Question

У меня проблемы с выполнением кода по порядку.По сути, у меня есть функция, которая скрывает элемент, консоль регистрирует сообщение, затем запускает другую функцию, которая медленно и масштабно вносит изменения в DOM.

В идеале сначала происходит скрытие, сигнализирующее о том, что ответ пользователя был сделан, затемони могут справиться с задержкой в ​​течение нескольких секунд, поскольку все обновляется.Но сейчас консоль сначала регистрируется, затем все изменения происходят сразу через несколько секунд.Таким образом, скрытие происходит вместе с обновлениями.

Если это имеет какое-либо значение, функция обновления создает и уничтожает несколько элементов div, а затем начинает создавать JSXGraphs и обновлять функции, точки и т. Д. На этих графиках.

check_answer(answer_input) {
  if (this.ans == answer_input) {
    $("#answer-card-section").hide();
    console.log("CORRECT!");

    current_question.update();
    return true;
  }
  else {
    return false;
  }
}

Спасибо!

Answer 1

При выполнении длительных функций в JS вызовы для визуализации пользовательского интерфейса могут быть заблокированы.В некоторых случаях это также может помешать предыдущей операции заметно обновить DOM, что вы видите здесь.

Простое исправление - перевести вызов update() в тайм-аут с небольшой задержкой.Это позволит hide() сначала обновить DOM.Попробуйте это:

function check_answer(answer_input) {
  if (this.ans == answer_input) {
    $("#answer-card-section").hide();

    setTimeout(function() {
      current_question.update();
    }, 25);
    return true;
  }
  else {
    return false;
  }
}

Answer 2

Похоже, вам нужно выполнить функцию обратного вызова после того, как все операции hide завершены. Один из способов добиться этого в jQuery - использовать $.when().done:

function check_answer(answer_input) {
  if (this.ans == answer_input) {
    $.when( $("#answer-card-section").hide() ).done(function() {
      current_question.update();
    });
    return true;
  } else {
    return false;
  }
}

Но будьте осторожны, как правило, возврат этой функции произойдет до того, как current_question.update() будет завершено.