理解JavaScript的阻塞行为
在web开发中，我们有时会遇到这样的情况：当用户点击一个单选按钮后，希望立即看到按钮被选中（ui更新），然后弹出一个提示框（alert）。然而，实际效果可能是alert先弹出，用户关闭alert后才能看到单选按钮的选中状态。这背后的原因在于javascript的执行机制，特别是alert函数的特性。
JavaScript是一种单线程语言，这意味着它在同一时间只能执行一个任务。当alert函数被调用时，它会暂停JavaScript代码的进一步执行，并阻塞整个浏览器UI线程。这意味着在alert对话框被用户关闭之前，任何UI更新（包括单选按钮状态的视觉变化）都无法进行。因此，单选按钮的选中状态在alert弹出前无法立即反映在界面上。
此外，alert函数在生产环境中通常不被推荐使用，因为它无法自定义样式，并且其阻塞行为会严重影响用户体验。
原始代码分析
考虑以下HTML结构，其中包含一个文本输入框和一组单选按钮：
colors
Choose your favorite color
以及对应的JavaScript代码（colors.js）：
立即学习“Java免费学习笔记（深入）”；
"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;
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;
}
}
switch (color){
case "red":
alert("Hi " + userName + ", your favorite color is red");
break;
case "blue":
alert("Hi " + userName + ", your favorite color is blue");
break;
// ... 其他颜色类似
default:
alert("There is an error");
break;
}
}这段代码的问题在于，当用户点击单选按钮时，colorChoice函数会立即执行，并在其中调用alert。由于alert的阻塞特性，单选按钮的选中状态在alert弹出前无法更新。
解决方案一：使用 setTimeout 延迟 alert
为了解决alert的阻塞问题，我们可以利用setTimeout函数将alert的执行延迟一小段时间。setTimeout将回调函数放入事件队列，允许当前执行栈中的任务（包括UI渲染）先完成，然后再执行延迟的任务。
将colorChoice函数中的alert调用修改为：
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;
}
}
// 使用 setTimeout 延迟 alert 的执行
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更新
}通过将alert包裹在setTimeout中，并设置一个很小的延迟（例如100毫秒），我们给了浏览器足够的时间来处理点击事件并更新单选按钮的视觉状态，然后再弹出alert。这样，用户就能先看到按钮被选中，再看到提示信息。
注意事项： 尽管setTimeout可以解决alert的阻塞问题，但alert本身在生产环境中仍应避免使用。此方法仅作为理解和解决特定阻塞问题的技术演示。
解决方案二：更简洁的事件监听与 setTimeout 结合
为了提高代码的可读性和维护性，我们可以采用更现代的JavaScript语法来处理事件监听，并结合setTimeout。这种方法减少了重复的代码，并利用了事件委托的优势（尽管在这里是直接监听每个按钮）。
以下是优化后的JavaScript代码：
const userNameInput = document.querySelector('#nameBox'); // 获取姓名输入框
const colorInputs = Array.from(document.querySelectorAll('input[name="colorButton"]')); // 获取所有单选按钮
const clickHandler = (event) => {
// 延迟 alert 的执行，确保 UI 更新
setTimeout(() => {
// 使用模板字符串简化 alert 内容
alert(`Hi ${userNameInput.value}, your favorite color is ${event.target.value}`);
}, 100);
};
// 为每个单选按钮添加事件监听器
colorInputs.forEach((input) => input.addEventListener('click', clickHandler));代码解析：
- document.querySelector('#nameBox')：使用更现代的querySelector方法获取ID为nameBox的元素（姓名输入框）。
- document.querySelectorAll('input[name="colorButton"]')：获取所有name属性为colorButton的input元素（即所有单选按钮）。querySelectorAll返回的是一个NodeList，它不是真正的数组。
- Array.from(...)：将NodeList转换为真正的数组，这样就可以使用数组的forEach方法。
- clickHandler = (event) => { ... }：定义一个箭头函数作为事件处理程序。event对象包含了触发事件的元素信息，event.target.value可以直接获取被点击单选按钮的value属性。
- input.addEventListener('click', clickHandler)：为每个单选按钮添加click事件监听器。这比直接设置onclick属性更灵活，可以添加多个监听器。
- 模板字符串（``）：使用反引号定义的字符串，允许嵌入表达式（如${userNameInput.value}），使字符串拼接更简洁。
这个方案在代码结构上更为优雅，但仍然依赖setTimeout来解决alert的阻塞问题。
最佳实践与替代方案
虽然setTimeout可以解决alert的阻塞问题，但它只是一个权宜之计。在实际的生产环境中，我们应避免使用alert，因为它：
- 阻塞性： 暂停所有JavaScript执行和UI渲染。
- 不可定制： 无法通过CSS进行样式修改，外观与操作系统或浏览器紧密绑定。
- 用户体验差： 强制用户中断操作，体验不佳。
推荐的替代方案是使用自定义的HTML/CSS/JS弹窗（Modal）。
通过构建一个自定义的HTML元素作为弹窗，并使用CSS进行样式控制，JavaScript负责显示/隐藏和数据填充。这种方式具有以下优势：
- 非阻塞： 弹窗通常不会阻塞主线程，用户可以继续与页面其他部分交互（除非设计为模态）。
- 高度可定制： 完全控制弹窗的外观和行为。
- 更好的用户体验： 可以设计更友好的交互方式，例如平滑的过渡动画。
许多前端框架和库（如Bootstrap、Materialize等）都提供了现成的模态框组件，或者你可以参考W3Schools等教程学习如何从零开始构建一个自定义的CSS模态框。
总结
JavaScript的alert函数由于其同步阻塞特性，会导致UI更新延迟。通过使用setTimeout可以有效解决这个问题，让UI有时间渲染后再弹出提示。然而，在专业的Web开发中，我们应尽量避免使用alert，并优先选择非阻塞、可定制的HTML/CSS/JS自定义弹窗来提供用户反馈，以确保更流畅和更优秀的用户体验。
