代码如下:
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控制台中执行它时,prompt
出现但背景仍然没有改变。如何修改代码,以便在prompt
出现之前改变背景?
DOM操作是同步的,但是他们的repaint isn't。这意味着它们[重绘]不会立即应用,它们只会被推入浏览器在[自由]时间时所做的一堆待办事项。那些异步作业在完成后没有回调使用,所以我们唯一可以做的就是确保在完成之后运行的东西就是将这些东西推到堆栈的待办事项中。我们可以通过使用延迟为setTimeout
的0
来做到这一点:
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>