Bootstrap Alert 自动关闭需绑定具体 DOM 元素并确保 Bootstrap JS 正确加载；动态插入时须在 DOM 渲染后批量初始化，监听 closed.bs.alert 事件清理定时器，避免重复绑定或误删；移动端应监听 visibilitychange 补关，推荐 CSS 动画替代 setTimeout。
Alert 关闭逻辑必须绑定到具体 DOM 元素，不能只靠 class
Bootstrap 的 .alert 只是样式类，本身不带任何交互行为。想让它自动关闭，得手动给每个警告框添加关闭触发逻辑，否则 setTimeout 一执行就找不到目标元素——尤其是动态插入的 Alert，容易漏绑或重复绑定。
实操建议：
- 用
document.querySelectorAll('.alert')批量获取，但需确保执行时机在 DOM 渲染后（比如放在DOMContentLoaded或插入后的回调里） - 对每个匹配元素调用
alertElement.addEventListener('closed.bs.alert', ...)监听关闭完成事件，避免定时器和手动点击关闭冲突 - 若用 jQuery，
$().alert('close')是触发关闭动作，不是移除 DOM；真正移除得等closed.bs.alert事件后再调用.remove()
使用 Bootstrap 自带的 dismiss 按钮 + JavaScript 控制定时器
Bootstrap Alert 要支持关闭，HTML 必须包含带 data-bs-dismiss="alert" 的按钮（即使不显示），否则 .alert('close') 不生效，且 closed.bs.alert 事件也不会触发。
常见错误现象：TypeError: alertEl.alert is not a function —— 多因未引入 Bootstrap JS 或未初始化 Popper/Bootstrap Bundle。
实操建议：
- 确保加载的是完整版
bootstrap.bundle.min.js（含 Popper），而非仅 CSS - 定时关闭代码应写成：
const alertEl = document.getElementById('myAlert'); setTimeout(() => { const bsAlert = new bootstrap.Alert(alertEl); bsAlert.close(); }, 3000); - 如果多个 Alert 共享同一计时逻辑，注意
this指向和闭包变量，推荐用forEach+ 独立setTimeout，别共用一个计时器 ID
手动移除 DOM 时要同步清理定时器和事件监听
直接 alertEl.remove() 很快，但若之前设了 setTimeout，回调里再操作已销毁的 alertEl 就会报错；更隐蔽的问题是：重复插入 Alert 时，旧的定时器还在跑，可能误关新元素。
实操建议：
- 为每个 Alert 实例绑定唯一 ID 或
dataset标识，定时器触发前先检查alertEl.parentNode是否存在 - 在
closed.bs.alert回调里清除对应定时器：clearTimeout(timerId)，并移除该元素 - 若用框架（如 Vue/React），优先交由组件生命周期控制，避免手动操作 DOM 和定时器混合管理
移动端 Safari 下 setTimeout 延迟偏高？换用 requestIdleCallback 配合 visibilitychange
某些 iOS 版本中，页面切到后台时 setTimeout 会被大幅延迟甚至暂停，导致 Alert 在用户返回后才突然消失，体验断裂。
实操建议：
- 监听
visibilitychange事件，在页面可见时立即检查是否超时，补关 - 对非关键路径的关闭逻辑，可用
requestIdleCallback替代setTimeout，降低主线程压力 - 简单方案：改用 CSS 动画 +
transitionend触发移除，配合opacity: 0; height: 0;，兼容性好且不受 JS 线程阻塞影响
bootstrap.Alert 构造函数是否可用，以及没处理页面不可见时的定时器漂移。 
