代码标题

延迟 5 秒后显示 Toast，并在 2 秒后自动移除的安全版 setTimeout 实现

函数实现

/**
 * 在指定延迟后显示一条 toast 消息，并在 2 秒后自动移除。
 * 返回一个对象，可用于取消尚未触发的延迟执行。
 *
 * 设计原则：
 * - 使用 textContent 避免 XSS 风险，替代不安全的 innerHTML。
 * - 参数与类型校验，避免运行时错误。
 * - 提供取消功能，避免页面切换或组件卸载时的内存泄漏。
 *
 * @param {Object} options
 * @param {number} options.delay 延迟时间，毫秒。必须为非负有限数值。
 * @param {string} options.message 要显示的提示消息。
 * @param {string} options.container 容器的选择器（如 "#notify"）。
 * @returns {{ id: number|null, cancel: function }} 返回超时定时器 id 和取消函数。
 */
function showTimeoutToast({ delay = 5000, message, container }) {
  // 基本校验
  if (typeof delay !== 'number' || !Number.isFinite(delay) || delay < 0) {
    throw new TypeError('delay 必须为非负有限数值');
  }
  if (typeof container !== 'string' || container.trim() === '') {
    throw new TypeError('container 必须为非空字符串选择器');
  }

  // 环境校验（SSR/非浏览器场景）
  if (typeof document === 'undefined') {
    console.warn('当前环境不存在 document，跳过 UI 显示');
    return { id: null, cancel: () => {} };
  }

  // 外层延迟：在 delay 毫秒后显示 toast
  const timeoutId = setTimeout(() => {
    try {
      const c = document.querySelector(container);
      if (!c) {
        console.warn(`未找到容器: ${container}`);
        return;
      }

      // 使用安全的 DOM API 构建内容，避免使用 innerHTML
      const toast = document.createElement('div');
      toast.className = 'toast';
      toast.textContent = String(message ?? '');

      // 将 toast 插入容器
      c.appendChild(toast);

      // 内层延迟：2 秒后移除 toast
      const removeId = setTimeout(() => {
        // 确保 toast 仍在对应容器中再移除
        if (toast && toast.parentNode === c) {
          c.removeChild(toast);
        }
        // 移除局部引用，帮助 GC
      }, 2000);

      // 可选：将 removeId 记录在元素上（便于调试或高级控制）
      toast.dataset.removeTimeoutId = String(removeId);
    } catch (err) {
      console.error('显示 toast 过程中发生错误：', err);
    }
  }, delay);

  // 提供取消尚未执行的外层定时器的能力
  return {
    id: timeoutId,
    cancel: () => {
      if (timeoutId !== null) {
        clearTimeout(timeoutId);
      }
    }
  };
}

参数说明

• delay: 数字，单位毫秒。本例为 5000，表示 5 秒后执行显示逻辑。
• message: 字符串，要显示的提示文本。示例为“请求超时，请稍后再试”。
• container: 字符串，DOM 选择器，用于指定消息容器。示例为“#notify”。

说明：

• 外层 setTimeout 使用 delay 控制显示时间点。
• 内层 setTimeout 固定为 2000 毫秒，用于自动移除 toast。
• 采用 textContent 设置文本，避免使用 innerHTML 带来的潜在安全风险。

使用示例

<!-- 示例容器 -->
<div id="notify"></div>

<!-- 可选：简单的样式，让 toast 更明显 -->
<style>
  .toast {
    display: inline-block;
    padding: 8px 12px;
    background: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }
</style>

<script>
  // 将上面的 showTimeoutToast 函数粘贴到此处或在外部脚本中引入

  // 调用：5 秒后显示提示，并在 2 秒后自动移除
  const timer = showTimeoutToast({
    delay: 5000,
    message: '请求超时，请稍后再试',
    container: '#notify'
  });

  // 如果需要取消尚未触发的显示（例如用户已成功返回数据）
  // 可在合适的时机调用：
  // timer.cancel();
</script>

注意事项

• 安全性：使用 textContent 设置消息文本，避免直接使用 innerHTML 引入 XSS 风险。
• 容器存在性：若选择器未匹配到容器，函数会警告并跳过显示，不会抛出致命错误。
• 取消机制：如果页面在 5 秒内卸载或业务状态发生变化，调用返回对象的 cancel() 可取消显示，避免不必要的 UI 操作。
• 定时器限制：浏览器 setTimeout 的最大延迟受 32 位整型限制，极大延迟会被截断；5000 毫秒在安全范围内。
• 兼容性：代码使用标准 DOM 与定时器 API，兼容主流现代浏览器。