预览页或暂存数据监听

草稿箱

可以用原生JS在didmount事件中监听加载暂存数据的按钮实现。
大致思路：循环延时获取dom元素并且绑定点击事件，500毫秒执行1次，如果3秒钟后还没有获取到就证明这个页面用户之前没有暂存过数据不予理会。

代码示例：

  // 用法示例
  bindClickEventWithDelay(".next-btn.next-medium.next-btn-primary.next-dialog-btn", () => {
    //这里可以写相关业务逻辑
    alert("点击加载暂存数据了")
  });

/** 参数说明：
selector：要查询的元素选择器。
callback：当元素被点击时调用的回调函数。
定时器设置：
setInterval每500 毫秒执行一次，以检查指定的DOM 元素是否存在。
查找DOM 元素：
使用document.querySelector(selector)获取目标元素。
判断逻辑：
如果 dialogBtn 元素存在，绑定点击事件并清除定时器。
如果达到最大尝试次数（即3 秒后），则停止进一步检查并清除定时器。
事件绑定：
一旦找到元素，就为该元素绑定点击事件，并在控制台输出确认信息。
*/
function bindClickEventWithDelay(selector, callback) {
  const duration = 3000; // 最大等待时间 3 秒
  const interval = 500;  // 每 500 毫秒检查一次
  let elapsed = 0;       // 已经经过的时间
  let maxAttempts = duration / interval; // 最大尝试次数
  let attempts = 0;      // 当前尝试次数

  // 定时器检查 DOM 元素
  const timer = setInterval(() => {
    const dialogBtn = document.querySelector(selector);
    attempts++;

    if (dialogBtn) {
      // 如果找到了元素，绑定点击事件
      dialogBtn.addEventListener('click', callback);
      console.log("绑定点击事件成功!");
      clearInterval(timer); // 找到元素后清除定时器
    }

    // 如果达到最大尝试次数，停止检查
    if (attempts >= maxAttempts) {
      clearInterval(timer);
      console.log("未找到元素，停止检查.");
    }
  }, interval);
}

最终效果：