代码没有按顺序运行？对DOM的更新是一次完成的吗？
代码没有按顺序运行？对DOM的更新是一次完成的吗？
提问于 2019-06-12 01:57:01
我在按顺序运行我的代码时遇到了一些问题。基本上，我有一个隐藏元素的函数，控制台记录一条消息，然后运行另一个函数，对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;
}
}谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-06-12 02:34:01
在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;
}
}Stack Overflow用户
发布于 2019-06-12 03:44:04
似乎你需要在所有的hide-operations完成之后执行一个回调函数。在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()完成之前发生。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56549327
复制相关文章
相似问题