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);
    }

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

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

代码无效的小提琴：https://jsfiddle.net/zjoeyhdz/

代码工作的小提琴：https://jsfiddle.net/sj8vzuhx/

Answer 1

我想它的工作原理如下执行语句mylist = [{'answer': Markup(u'7'), 'question': u'5 and 2'}, {'answer': u'8', 'question': u'2 and 6'}]时，浏览器不会立即更改视图，只会记住新样式。 JavaScript执行完成后，它将应用所有样式更改，但不一定按语句执行的顺序执行。在某些浏览器中，它会首先执行document.querySelector("#square").style.... = ....，然后执行display（就像在IE11中，它可以很好地兼容你的小提琴），而在其他浏览器中，它会反过来发生（Chrome，火狐）。

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

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

1 个答案: