如何实现多个独立定时消失的 Toast 通知（JavaScript 教程）-html教程-PHP中文网

如何实现多个独立定时消失的 Toast 通知（JavaScript 教程）

本文详解如何使用原生 javascript 构建支持多实例、各自独立倒计时与自动移除的 toast 通知系统，解决堆叠错位、z-index 冲突及手动关闭逻辑错误等常见问题。

本文详解如何使用原生 javascript 构建支持多实例、各自独立倒计时与自动移除的 toast 通知系统，解决堆叠错位、z-index 冲突及手动关闭逻辑错误等常见问题。

在实际开发中，一个健壮的 Toast 通知系统不应仅满足“弹出即消失”，更需支持多实例并存、每个通知拥有独立生命周期、动态布局不遮挡底层交互元素（如按钮）。原始代码存在几个关键缺陷：z-index 被错误地反复设置为 -1 导致容器失效；所有通知共用同一全局 setTimeout 延时（5s），无法个性化；动画移除后未及时清理 DOM，造成视觉堆叠与点击穿透失效。

以下是一个经过重构、生产就绪的解决方案：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

✅ 核心改进点

每个 Toast 实例绑定专属 timeoutId，支持自定义持续时间（毫秒）；
容器 .container-alert 保持固定 z-index: 9999，绝不设为 -1 —— 元素级控制显隐，而非容器级禁用；
使用 CSS transform: translateY() + opacity 实现平滑进出动画，避免 display: none 导致的布局重排；
手动关闭与自动消失均触发相同清理流程，确保 DOM 和内存零残留。

?️ 优化后的完整代码

function toastNotification(msg, duration = 5000) {
  const alertContainer = document.querySelector(".container-alert");
  const newAlert = document.createElement("div");
  newAlert.className = "alert showAlert";
  newAlert.innerHTML = `
    <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewbox="0 0 48 48"><defs><mask id="ipSCheckOne0"><g fill="none" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="M24 44a19.937 19.937 0 0 0 14.142-5.858A19.937 19.937 0 0 0 44 24a19.938 19.938 0 0 0-5.858-14.142A19.938 19.938 0 0 0 24 4A19.938 19.938 0 0 0 9.858 9.858A19.938 19.938 0 0 0 4 24a19.937 19.937 0 0 0 5.858 14.142A19.938 19.938 0 0 0 24 44Z"></path><path stroke="#000" stroke-linecap="round" d="m16 24l6 6l12-12"></path></g></mask></defs><path fill="#30d300" d="M0 0h48v48H0z" mask="url(#ipSCheckOne0)"></path></svg><span class="msg">${msg}</span>
    <div class="close-btn"><i class="fas fa-times"></i></div>
  `;

  // 插入到容器顶部（保证新通知在最上层）
  alertContainer.insertBefore(newAlert, alertContainer.firstChild);

  // 启动专属倒计时
  const timeoutId = setTimeout(() => {
    newAlert.classList.remove("showAlert");
    newAlert.classList.add("hide");
    setTimeout(() => {
      if (newAlert.parentNode === alertContainer) {
        alertContainer.removeChild(newAlert);
      }
    }, 300); // 匹配 CSS 动画时长
  }, duration);

  // 绑定关闭按钮事件（同样清除专属 timeout）
  const closeBtn = newAlert.querySelector(".close-btn");
  closeBtn.addEventListener("click", () => {
    clearTimeout(timeoutId);
    newAlert.classList.remove("showAlert");
    newAlert.classList.add("hide");
    setTimeout(() => {
      if (newAlert.parentNode === alertContainer) {
        alertContainer.removeChild(newAlert);
      }
    }, 300);
  });
}

// ✅ 正确调用示例：每个通知独立定时
toastNotification("✅ 商品已加入购物车！", 4000);
setTimeout(() => toastNotification("⚠️ 库存紧张，请尽快结算", 6000), 800);
setTimeout(() => toastNotification("? 优惠券已生效", 3000), 1600);

? 关键 CSS 补充（修复原始样式）

.container-alert {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999; /* 固定高优先级，不再动态修改 */
  width: 27rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 确保通知间有间距 */
  pointer-events: none; /* 容器不拦截点击 */
}

.alert {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto; /* 仅通知本身可交互 */
}

.alert.showAlert {
  opacity: 1;
  transform: translateY(0);
}

.alert.hide {
  opacity: 0;
  transform: translateY(20px);
}

.close-btn {
  margin-left: auto;
  cursor: pointer;
  color: #999;
  font-size: 1.1rem;
}
.close-btn:hover {
  color: #333;
}

⚠️ 注意事项与最佳实践

禁止动态修改容器 z-index：原始代码中 alertContainer.style.zIndex = "-1" 是根本性错误——它使整个容器不可见且无法响应事件。应始终通过 opacity 和 transform 控制单个 Toast 的显隐。
使用 insertBefore 而非 appendChild：确保新通知始终显示在最上方，避免被旧通知遮挡。
清理 timeoutId：手动关闭时务必 clearTimeout(timeoutId)，防止已关闭通知仍触发自动移除，引发异常。
动画时长同步：CSS 中 transition: 0.3s 必须与 JS 中 setTimeout(..., 300) 严格一致，否则出现闪烁或残留。
无障碍增强（可选）：为 .alert 添加 role="alert" 和 aria-live="polite"，提升屏幕阅读器兼容性。