javascript - 为什么我的 javascript 代码不能从上到下编码？

Question

为什么我的 javascript 代码不能从上到下处理编码？

https://jsfiddle.net/p47f6Lcy/1/

当按下 id="test" 时使用我的代码 为什么在更改 backgroundColor 和 translate3d 之前仍然alert

查看我的代码，它应该在调用函数 test2_fn 之前更改 backgroundColor 和 translate3d

如何更改 backgroundColor 和 translate3d befire alert ？

..

<div id="test" onclick="test_fn()">
CLICK
</div>

<script>
function test_fn(){
    document.getElementById("test").style.backgroundColor = "red";
    document.getElementById("test").style.transform = "translate3d(500px, 0px, 0px)";    
    test2_fn();
}

function test2_fn(){
    alert("555");
}
</script>

Answer 1

作为nnnnnn评论中提到:

Because the browser doesn't repaint the screen until the current JS finishes executing. So the element styles have been updated in the DOM, you just don't see it yet.

如果真的要做，可以把另一个函数的执行推迟到事件循环中的下一个循环。您可以简单地使用 setTimeout(test2_fn, 0)。

Working fiddle

This也是一本好书。