Javascript:可以在当前完成之前执行正向行吗

Question

最近几天我遇到了一种几乎让我发疯的情况。这可能是我的一个愚蠢之处，但我真的认为，如果不考虑操作系统的升级过程和其他东西，这个问题就无法解决。

问题如下：想象一下，我有一个带有点击事件的红色小方块：

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

函数setOpacity1负责使另一个正方形——这个黑色的更大的正方形——出现。首先，它将此方块的显示设置为block（以前是none）；其次，它将不透明度设置为1（之前为0）：

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

但这里我们有一个特殊性：黑色方块的不透明度变化与之相关的是transition。因此，预期的行为是方块出现缓慢，从"100%白色"变为"100%黑色"。

但它并没有发生。然而，这种行为是通过this代码实现的：

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

因此，在我看来，在第一种情况下，不透明度的变化在显示变化之前开始。。。然后，当显示最终设置好时，不透明度的转换就会"中断"。在第二种情况下，我命令浏览器在设置不透明度之前等待一段时间，这给了他之前设置显示的时间。

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

代码不起作用：https://jsfiddle.net/zjoeyhdz/

代码工作的混乱：https://jsfiddle.net/sj8vzuhx/

Answer 1

我想它的工作原理如下
当执行语句document.querySelector("#square").style.... = ....时，浏览器不会立即更改视图，只会记住新样式。JavaScript执行完成后，它会应用所有样式更改，但不一定按照语句执行的顺序。在一些浏览器中，它会先执行display，然后执行opacity（就像在IE11中一样，它可以很好地处理你的两个问题），而在其他浏览器中，情况会相反（Chrome、Firefox）。

是的，您的解决方法将解决所有浏览器的问题。