Javascript：转发行可以在当前完成之前执行吗？

最近几天我遇到了一个几乎让我发疯的情况。也许这是我的一个愚蠢，但我真的认为，如果不考虑操作系统的进程计算之类的问题，就无法探索这个问题

问题如下：假设我有一个带有点击事件的小红场：

document.querySelector("#button").onclick = setOpacity1;

函数

setOpacity1

负责使另一个正方形（这一个黑色和更大）出现。首先，它将此方块的显示设置为

block

（以前是

none

）；其次，它将其不透明度设置为1（之前为0）：

但这里我们有一个特殊性：黑色正方形不透明度的变化有一个与之相关的

转换。因此，预期的行为是正方形缓慢出现，从“100%白色”到“100%黑色”

但事实并非如此。但是，此行为是通过
此
代码实现的：

document.querySelector("#button").onclick = setOpacity1;

    function setOpacity2(){
        document.querySelector("#square").style.opacity = 1;
    }

    function setOpacity1(){
        document.querySelector("#square").style.display = "block";
        setTimeout(setOpacity2,20);
    }

因此，在我看来，在第一种情况下，不透明度的变化开始于显示变化之前……然后，当显示最终被设置时，不透明度的转换被“中断”。在第二种情况下，我命令浏览器在设置不透明度之前等待一段时间，这让他有时间在设置之前设置显示

这个论点有意义吗？如果没有，这里发生了什么

代码的混乱不起作用：

乱七八糟的代码在工作：
我想它的工作原理如下。

当语句
document.querySelector（“#square”）.style时，浏览器不会立即更改视图，它只会记住新样式。JavaScript执行完成后，将应用所有样式更改，但不一定按照语句的执行顺序。在某些浏览器中，它会先执行
显示
，然后执行
不透明度
（就像在IE11中，它可以很好地处理你的小提琴），而在其他浏览器中，它会以相反的方式执行（Chrome、Firefox）

是的，您的解决方法将解决所有浏览器的问题。
不同的浏览器有不同的行为。在Internet Explorer 11中，两个小提琴都可以正常工作。@www.admiralit.nl抱歉。在谷歌浏览器上试试。
document.querySelector("#button").onclick = setOpacity1;

    function setOpacity2(){
        document.querySelector("#square").style.opacity = 1;
    }

    function setOpacity1(){
        document.querySelector("#square").style.display = "block";
        setTimeout(setOpacity2,20);
    }