如何在JavaScript中实现toastr.error弹窗数秒后自动关闭

Toastr 弹窗自动关闭实现方案 #

toastr 本身内置了自动关闭的配置能力，可通过以下两种方式实现无需点击、X秒后自动关闭的效果：

1. 全局配置（所有弹窗统一生效） #

在调用 toastr 前先全局设置配置项：

// 全局配置，所有后续调用的toastr弹窗都生效
toastr.options = {
  timeOut: 5000, // 自动关闭等待时长，单位为毫秒，此处5000对应5秒
  extendedTimeOut: 0, // 鼠标悬浮在弹窗上时的额外等待时长，设为0则悬浮不会延长关闭时间
  closeButton: false, // 无需关闭按钮可设为false
  tapToDismiss: false // 无需点击弹窗关闭可设为false
}

// 正常调用弹窗即可
toastr.error('Testing pop-up')

2. 单次调用单独配置（仅当前弹窗生效） #

如果只需要单条错误弹窗自动关闭，其余弹窗保持原有配置，可以在调用时传入独立配置：

// 调用语法：toastr.error(内容, 标题, 配置项)，不需要标题可传null
toastr.error('Testing pop-up', null, {
  timeOut: 3000, // 3秒后自动关闭
  extendedTimeOut: 0
})

核心参数说明 #

• timeOut：弹窗完全渲染完成后，自动关闭的倒计时时长，单位毫秒
• extendedTimeOut：鼠标移入弹窗时会暂停倒计时，移出后会按该参数的数值重新倒计时，不需要悬浮延长关闭时间可直接设为0

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