代码未按顺序运行？ DOM更新一次发生吗？

Question

我在按顺序运行代码时遇到了麻烦。 基本上，我有一个隐藏元素的功能，在控制台上记录一条消息，然后运行另一个对DOM进行缓慢且大量更改的功能。

理想情况下，先进行隐藏以表示用户做出了响应，然后在一切刷新后他们可以处理几秒钟的延迟。 但是现在，首先要记录控制台，然后几秒钟后立即进行所有更改。 因此，隐藏与更新一起发生。

如果有任何区别，则update函数会创建并销毁多个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中执行长时间运行的函数时，可以阻止呈现UI的调用。 在某些情况下，它还可以防止以前的操作明显地更新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()完成之前将返回此函数。