为何在window.alert()执行前无法清空email输入框？

• 先明确两个核心机制：

  1. 浏览器的UI渲染更新不是同步触发的——当你修改input.value = ''后，浏览器不会立刻把清空效果渲染到页面，而是把这个UI更新任务放进队列，要等当前正在执行的宏任务（也就是按钮点击事件处理函数）全部执行完，才会进入UI渲染阶段完成页面更新。
  2. alert()是阻塞性API，一旦调用就会暂停浏览器所有后续事件循环流程（包括UI渲染），直到你手动关闭弹窗才会恢复。

• 你之前的同步代码逻辑问题就在这：

  // 1. 修改输入框value，但UI还没来得及更新
  emailInput.value = '';
  // 2. 立刻调用alert，直接阻塞所有流程，UI更新被卡住
  alert('弹窗内容');
  

  浏览器还没处理输入框的UI更新，就被alert打断了，直到你关掉弹窗才会去完成UI更新，但这时候弹窗已经消失，自然看不到清空的过程。

• 而加上await new Promise(resolve => setTimeout(resolve, 20))后：
  await会暂停当前事件处理函数的执行，先让当前宏任务的同步代码收尾，浏览器此时会优先处理UI渲染（输入框就被清空了）。等20ms后setTimeout的回调触发、Promise被resolve，await恢复执行再调用alert()——这时候UI已经更新完成，你就能在弹窗出现前看到输入框清空的效果了。

说白了就是：alert抢在了UI更新前面，那段带setTimeout的Promise相当于给了浏览器一点时间先把UI更完，再弹出alert。

内容的提问来源于stack exchange，提问作者komote7665