javascript - 一些操作完成后如何执行window.prompt？

Question

代码是这样的:

for(var node=iterator.iterateNext(),origin_background=node.style.background;node;node=iterator.iterateNext())
{
    console.log('change color.');
    node.style.background="#3E6998";
}
var input_str=window.prompt('Next Step?\n1....');
if(input_str=='1')
    ...

当我在 Chrome 控制台中执行它时，提示 出现，但背景仍然没有改变。如何修改代码，让后台在提示出现之前发生变化？

Answer 1

DOM 操作是同步的，但它们的 repaint isn't .这意味着它们 [重绘] 不会立即应用，它们只是被推送到浏览器有 [空闲] 时间时将执行的待办事项堆栈中。这些类型的异步作业在完成时没有回调可供使用，因此我们唯一能做的就是将这些东西推送到待办事项堆栈中以确保它们在完成后运行。我们可以通过使用延迟为 0 的 setTimeout 来做到这一点:

var div = document.getElementById("div");

div.style.background = "green";

setTimeout(function() {
  var name = prompt("Name?");
  console.log(name);
}, 0);

#div {
  width: 200px;
  height: 200px;
  background: red;
}

<div id="div"></div>