＆＃34; alert＆＃34;的神秘执行顺序在JavaScript中

Question

<h1 id="title">foo</h1>

<script>
    setTimeout(function() {
        document.getElementById('title').innerText = 'bar';
        alert("alert");
    }, 1000);
</script>

当我执行上面的代码时，我希望显示＆＃34; bar＆＃34;。 然而，它显示了＆＃34; foo＆＃34;。

之后，当我按下＆＃34; OK＆＃34;警告对话框上的按钮，＆＃34; bar＆＃34;显示。

JavaScript是一个单独的线程。 除非是异步处理，否则应该从源代码的顶部按顺序执行。

请解释此警告＆＃34;

的行为

样品

https://codepen.io/crystalcode/pen/aEygOZ/

谢谢。