Question

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

在MSMessage.URL时按下我的代码为什么在更改id="test"和alert之前仍然backgroundColor

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

如何更改test2_fn和backgroundColor befire translate3d？

...

alert

Answer 1

评论中提及的nnnnnn：

因为浏览器在当前JS完成执行之前不会重新绘制屏幕。所以元素样式已在DOM中更新，你还没有看到它。

如果您真的想这样做，可以将其他功能的执行推迟到事件循环中的下一个循环。您只需使用setTimeout(test2_fn, 0)。

即可

Working fiddle

This也是一本很好的读物。

Answer 2

因为它使用堆栈在渲染之前清除更改。为了清除堆栈，您需要执行所有语句。我添加了一点 10ms ，因此可能会发生 altert 。

function test_fn(callback){
    document.getElementById("test").style.backgroundColor = "red";
    document.getElementById("test").style.transform = "translate3d(500px, 0px, 0px)";    
    
}

function test2_fn(){
  setTimeout(function(){ alert("555");},10) ;
}

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

Answer 3

问题是浏览器在调用警报之前不会重新绘制页面。

以下可能会解决问题：

    <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)"; 
    setTimeout(test2_fn,20);
}

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

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

3 个答案: