单选按钮点击后Alert阻塞UI解决方法
“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《单选按钮点击后Alert阻塞UI更新解决方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！
理解问题：alert的阻塞特性
在Web开发中，JavaScript作为一种单线程、同步执行的语言，其代码的执行顺序至关重要。当用户点击一个单选按钮时，通常期望立即看到按钮被选中的视觉反馈，随后再执行相应的业务逻辑，例如弹出一个提示框。然而，如果直接在事件处理函数中使用alert()函数来显示信息，你可能会发现alert弹窗会先于单选按钮的选中状态更新而出现。
这是因为alert函数是一个同步且阻塞的调用。当alert被触发时，它会暂停JavaScript代码的进一步执行，同时也会阻塞浏览器渲染线程。这意味着，在alert弹窗被用户关闭之前，浏览器无法更新DOM（Document Object Model）以反映单选按钮的选中状态。因此，用户在关闭alert之前，无法看到他们刚刚点击的按钮已经被选中。这种阻塞行为在大多数生产环境中都是不希望发生的，因为它会严重影响用户体验。
解决方案一：利用setTimeout异步延迟
为了解决alert的阻塞问题，一个可行的工作是使用setTimeout函数将alert的调用推迟到当前的JavaScript执行栈清空之后。setTimeout将回调函数放入事件队列，使其在当前所有同步代码执行完毕后才会被执行。这样，浏览器就有机会在alert出现之前完成UI的更新，包括单选按钮选中状态的渲染。
以下是原始代码经过setTimeout改进后的示例：
"use strict";
window.onload = pageLoad;
function pageLoad(){
// 为所有单选按钮添加事件监听器
var colorButtons = document.getElementsByName("colorButton");
for(var i = 0; i < colorButtons.length; i++){
colorButtons[i].onclick = colorChoice;
}
}
function colorChoice(){
var userName = document.getElementById("nameBox").value;
var color;
var all_colors = document.getElementsByName("colorButton");
for(var i = 0; i < all_colors.length; i++){
if(all_colors[i].checked){
color = all_colors[i].value;
break; // 找到选中的颜色后即可跳出循环
}
}
// 使用setTimeout延迟alert，让UI有时间更新
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;
}
}, 100); // 延迟100毫秒，通常足以让UI完成渲染
}在这个示例中，我们将整个switch语句（包含alert调用）包裹在一个setTimeout回调函数中，并设置了100毫秒的延迟。这短暂的延迟足以让浏览器在alert弹出之前，将单选按钮的选中状态更新到DOM并渲染出来。
注意事项：alert的局限性
尽管setTimeout可以解决alert的阻塞问题，但alert本身在现代Web开发中仍不被推荐用于生产环境。主要原因包括：
- 阻塞性： 即使使用setTimeout，alert仍然会阻塞用户与页面的交互，直到用户关闭它。
- 不可样式化： alert弹窗的外观由浏览器决定，无法通过CSS进行定制，与网站整体风格不符。
- 用户体验差： 频繁的alert弹窗会打断用户操作流程，降低用户体验。
因此，setTimeout只是一种针对alert阻塞行为的临时解决方案。
解决方案二：现代JavaScript事件处理与非阻塞提示
为了编写更高效、更易维护且用户体验更好的代码，推荐使用现代JavaScript的事件处理机制，并考虑使用非阻塞的提示方式（例如自定义模态框、Toast通知等）。
以下是一个使用addEventListener和模板字符串重构后的代码示例，它不仅解决了阻塞问题，还大大简化了代码：
"use strict";
window.onload = pageLoad;
function pageLoad(){
const userNameInput = document.querySelector('#nameBox');
// 获取所有名为"colorButton"的单选按钮
const colorInputs = Array.from(document.querySelectorAll('input[name="colorButton"]'));
// 定义一个通用的点击事件处理函数
const clickHandler = (event) => {
// 使用setTimeout延迟alert，确保UI先更新
setTimeout(() => {
// 使用事件对象的target属性直接获取被点击单选按钮的值
alert(`Hi ${userNameInput.value}, your favorite color is ${event.target.value}`);
}, 100); // 延迟100毫秒
};
// 遍历所有单选按钮并为它们添加事件监听器
colorInputs.forEach((input) => input.addEventListener('click', clickHandler));
}代码亮点：
- document.querySelector 和 document.querySelectorAll： 更现代、更灵活的DOM元素选择方法。
- Array.from()： 将NodeList转换为真正的数组，以便使用forEach等数组方法。
- addEventListener： 替代onclick属性，支持为同一元素添加多个事件处理函数，且更符合标准。
- event.target.value： 在事件处理函数中，event.target直接指向触发事件的元素，可以直接获取其value属性，无需遍历所有单选按钮来查找选中项，大大简化了逻辑。
- 模板字符串（Template Literals）： 使用反引号 ` 允许嵌入表达式 ${}，使字符串拼接更简洁易读。
最佳实践：使用自定义模态框
在实际生产环境中，强烈建议避免使用alert。相反，可以利用HTML、CSS和JavaScript构建自定义的模态框（Modal）、弹出层或Toast通知。这些自定义组件具有以下优势：
- 可样式化： 完全控制外观，与网站设计保持一致。
- 非阻塞性（可选）： 可以设计成非阻塞的，允许用户在提示出现时继续与页面交互，或在短时间后自动消失。
- 更好的用户体验： 提供更平滑、更专业的交互体验。
许多UI库和框架都提供了现成的模态框组件，例如Bootstrap Modal、Materialize CSS Modal等，或者你可以参考W3Schools等教程自行实现。
HTML结构示例
为了使上述JavaScript代码能够正常工作，你需要一个包含文本输入框和一系列单选按钮的HTML页面。以下是对应的HTML结构：
<html lang="en">
<head>
<title> Colors </title>
<!-- 引用你的JavaScript文件 -->
<script type = "text/javascript" src = "colors.js" ></script>
</head>
<body>
<h4> Choose your favorite color </h4>
<form id="colorsForm">
<label>Enter your name:
<input type = "text" name = "nameTextBox" id="nameBox" /> <br/>
</label>
<label> <input type = "radio" name = "colorButton"
value = "red" id="red" />
Red </label>
<br />
<label> <input type = "radio" name = "colorButton"
value = "blue" id="blue" />
Blue </label>
<br />
<label> <input type = "radio" name = "colorButton"
value = "green" id="green" />
Green </label>
<br />
<label> <input type = "radio" name = "colorButton"
value = "yellow" id="yellow" />
Yellow </label>
<br />
<label> <input type = "radio" name = "colorButton"
value = "orange" id="orange" />
Orange </label>
</form>
</body>
</html>请确保你的JavaScript文件（例如colors.js）与HTML文件在同一目录下，或者在