如何实现单选按钮选中状态显示后再触发JavaScript alert弹窗？

不需要移除switch语句，问题根本不在switch，而是alert的执行时机不对。

为什么会出现这个问题？ #

alert是同步阻塞式的弹窗，当你在点击事件里直接调用它时，浏览器还没来得及把单选按钮的选中状态画到页面上，就被alert卡住了——浏览器得等你关掉alert，才会继续完成UI渲染，所以看起来alert先弹出来，单选框后选中。

怎么改？ #

把alert的执行推迟到浏览器完成当前UI渲染之后就行，用setTimeout把switch里的alert代码包起来，哪怕延迟0毫秒也管用（因为0毫秒会让代码排队，等当前渲染任务做完再执行）。

修改后的JS代码：

"use strict";
window.onload = pageLoad;

function pageLoad(){
    var redButton = document.getElementById("red").onclick=colorChoice;
    var blueButton = document.getElementById("blue").onclick=colorChoice;
    var greenButton = document.getElementById("green").onclick=colorChoice;
    var yellowButton = document.getElementById("yellow").onclick=colorChoice;
    var orangeButton = document.getElementById("orange").onclick=colorChoice;
}

function colorChoice(){
    var userName = document.getElementById("nameBox").value;
    // 直接用this拿到当前点击的单选按钮值，不用遍历所有按钮
    var color = this.value;
    
    setTimeout(() => {
        switch (color){
            case "red":
                alert("Hi " + userName + ", your favorite color is red");
                break;
            case "blue":
                alert("Hi " + userName + ", your favorite color is blue");
                break;
            case "green":
                alert("Hi " + userName + ", your favorite color is green");
                break;
            case "yellow":
                alert("Hi " + userName + ", your favorite color is yellow");
                break;
            case "orange":
                alert("Hi " + userName + ", your favorite color is orange");
                break;
            default:
                alert("There is an error");
                break;
        }
    }, 0);
}

额外优化（可选） #

原来的代码里遍历所有单选按钮找选中项完全没必要，因为colorChoice是单选按钮的点击事件回调，this就指向当前被点击的单选按钮，直接用this.value就能拿到选中的颜色值，省掉循环代码。

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