如何在select的onchange事件中先显示选中值再执行处理逻辑？

问题根源在于alert是同步阻塞的——onchange事件触发后，浏览器还没完成select的UI状态更新，就被alert中断了，必须等用户点击OK才会继续处理界面渲染。

只需要把alert的执行放到异步任务队列里，让浏览器先完成select的选中状态更新，再弹出提示：

mySelectElement.onchange = function() {
    if(mySelectElement.value >= 1000) {
        // 用setTimeout将alert延后执行，优先完成UI更新
        setTimeout(() => {
            alert("你确定能吃这么多苹果吗？");
        }, 0);
    }
};

setTimeout会把回调函数加入到事件循环的下一轮任务中，当前同步代码（包括浏览器的UI渲染逻辑）执行完毕后，才会触发这个异步回调，这样就能保证select的选中值先显示在页面上，再弹出警告框。

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