data-bs-delay不生效的主因是data-bs-autohide="false"禁用了自动隐藏逻辑，或JS初始化时delay参数覆盖了HTML属性；动态插入需立即用getOrCreateInstance初始化并传delay。
data-bs-delay 属性改不生效？先检查 data-bs-autohide
Toast 不按你设的 data-bs-delay 时间消失，大概率是因为 data-bs-autohide="false" 被显式写了，或者被 JS 初始化时覆盖。这个属性默认是 true，但只要设成 false，整个自动隐藏逻辑就直接跳过——data-bs-delay 值再对也没用。
常见踩坑点：
- 为了加手动关闭按钮，顺手加了
data-bs-autohide="false"，结果 toast 永远不消失 - HTML 里写了
data-bs-delay="3000"，但 JS 初始化时又传了{ delay: 5000 }，后者会完全覆盖前者 - 动态插入 toast 后没重新初始化实例，DOM 上的属性压根没被读取
JS 初始化时传 delay 参数更可靠
尤其在 Vue/React 或 AJAX 动态渲染场景下，靠 HTML 属性容易漏掉或时机错乱。推荐统一用 bootstrap.Toast.getOrCreateInstance() 初始化，并显式传参：
const toastEl = document.querySelector('#my-toast');
const toast = bootstrap.Toast.getOrCreateInstance(toastEl, {
delay: 2500 // 单位毫秒，优先级高于 data-bs-delay
});
toast.show();
注意：
- 别用
new bootstrap.Toast()，重复调用会创建多个实例，导致定时器叠加、内存泄漏 -
delay是 JS 初始化选项名，不是 HTML 属性名；它只在show()调用时读取一次，之后改值无效 - 如果 toast 元素是后来插入 DOM 的（比如从 API 返回的 HTML 字符串），必须在插入后立即初始化，不能等
DOMContentLoaded
动态更新延时？得手动管理定时器
data-bs-delay 和 JS 的 delay 都只在 show() 时读取一次，DOM 更新或重设参数不会重置已启动的定时器。真要中途改时间，得自己清旧定时器、设新定时器：
let timerId;
function showWithDelay(el, ms) {
clearTimeout(timerId);
const toast = bootstrap.Toast.getOrCreateInstance(el);
toast.show();
timerId = setTimeout(() => toast.hide(), ms);
}
关键点：
- 必须在
hidden.bs.toast事件里再次clearTimeout(timerId)，否则 toast 关闭后 timer 还在跑，可能触发已销毁实例的方法报错 - 如果你同时支持手动关闭和自动关闭，这个清理步骤不能省，否则用户点 × 后，定时器仍会继续执行
toast.hide() - 不要依赖
setTimeout硬编码时间去匹配 CSS transition，Toast 的隐藏动画时长由 CSS 控制，默认约 150ms，和延时无关
全局统一延时？Bootstrap 没这功能，得自己封装
Bootstrap 原生不提供类似 Toast.defaults.delay 的配置项，每个 toast 实例都独立读自己的参数。如果你项目里大量 toast 都要设成 3 秒，又想保留个别例外（比如错误提示要 8 秒），最稳的方式是封装一个工厂函数：
function createAutoToast(el, options = {}) {
return bootstrap.Toast.getOrCreateInstance(el, {
delay: options.delay ?? 3000,
...options
});
}
这样既避免重复写 delay: 3000，又能灵活覆盖：createAutoToast(el, { delay: 6000 })。
真正容易被忽略的是：所有动态 toast 都必须走同一套初始化路径。哪怕只是改个文字内容再 show，也要确保实例没被销毁重建——否则定时器就断了。
