代码不运行顺序？ 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 中执行长运行函数时，渲染 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;
  }
}

但请注意，一般来说，此功能的 return 会在 current_question.update() 完成之前发生。

代码不运行顺序？ DOM 的更新是一次性完成的吗？

Code doesn't run in order? Updates to DOM happen all at once?

javascript

jquery

jsxgraph