鍍金池/ 問答/HTML/ chrome js寫在css控制后面卻先執(zhí)行了 火狐的是先css，再執(zhí)行了al

chrome js寫在css控制后面卻先執(zhí)行了 火狐的是先css，再執(zhí)行了alert

代碼的意思應(yīng)該是 先變成紅色，再彈1。但是現(xiàn)在反過來了。。。
<style>

    #box{
        width: 100px;
        height: 100px;
        background-color: #7FFFD4;
    }
</style>
<body>
    <div id="box"></div>
    <button>123123</button>
    
</body>
<script>
    $("button").click(function() {
        $("#box").css("background-color", "red");
        alert(1)
    })
</script>
回答
編輯回答
淺淺

firefox,IE 11 上沒問題，opera 和 chrome 有問題

2018年7月27日 21:37
編輯回答
奧特蛋

執(zhí)行順序其實沒錯，只是 alert() 會阻塞頁面更新。

$("#box").css("background-color", "red") // 這行先執(zhí)行了
alert(1) // 彈出框，頁面不更新了，此時 css 其實已經(jīng)改了，但是頁面沒有更新所以你看不到變成紅色

補充

解決方法很簡單，用 setTimeout 就行了

$("#box").css("background-color", "red")
setTimeout(() => {
  alert(1)
}, 0)
2017年12月31日 18:59