UI渲染和JS执行先后问题

Question

<div id="div">
    begin
</div>

<script>
setTimeout(function() {
    alert(' ui 已经渲染完毕了吗？ ');
    console.log('timeout1');
    new Promise(function(resolve) {
        console.log('promise3');
        resolve();
        console.log('promise4');
    }).then(function() {
        alert(' 为什么这里ui已经渲染成finally了 ');
        console.log('then2');
    })
    div.innerHTML = 'finally';
})
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
    console.log('promise2');
}).then(function() {
    console.log('then1');
    alert(' ui 开始渲染 ');
})
console.log('global1');
div.innerHTML = 'end';
</script>

ui在第一个事件循环之后innerHTML渲染成 end 我能理解，进入settimeout之后为什么渲染在微任务之前执行

Answer 1

因为Promise是个异步的操作。你的.then()本质上就是一个callback回调函数。执行完new Promise() 之后，仅仅给你返回一个句柄，然后继续往下执行div.innerHTML = 'finally';。

js本来就是异步的。你想按正常的人脑逻辑执行的话，用 async/await 去做。但async本质上还是promise

Answer 2

虽然在超时调用中，但本质是不会变的，new promise()异步的，和同步放在一起当然是同步先执行，虽然说promise是解决回调深渊问题的，但还是会进行一个异步操作，.then()返回结果。补充一句，业务逻辑的问题，你最好自己亲自调试下。