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

Question

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

问题如下:假设我有一个带有点击事件的红色小方 block :

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

setOpacity1 函数负责制作另一个正方形——这个黑色的更大的正方形——出现。首先，它将这个方 block 的显示设置为block (之前是none)；其次，它将不透明度设置为 1(之前为 0):

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

但是这里我们有一个特殊性:黑色方 block 的不透明度变化有一个与之相关的transition。因此，预期的行为是正方形缓慢出现，从“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);
    }

所以，在我看来，在第一种情况下，不透明度的变化在之前显示的变化开始......然后，当显示最终设置好时，不透明度的过渡得到“坏了”。在第二种情况下，我命令浏览器在设置不透明度之前稍等片刻，这让他有时间在之前设置显示。

这个说法有道理吗？如果不是，这里发生了什么？

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

fiddle 代码工作:https://jsfiddle.net/sj8vzuhx/

Answer 1

我猜它的工作原理如下。
当语句 document.querySelector("#square").style.... = .... 被执行时，浏览器不会立即改变 View ，它只是记住新的样式。当 JavaScript 执行完成时，它会应用所有样式更改，但不一定按照语句的执行顺序。在某些浏览器中，它会先执行 display，然后再执行 opacity(就像在 IE11 中一样，它适用于您的 fiddle )，而在其他浏览器中，它会发生其他方式(Chrome、Firefox)。

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