会话内仅执行一次带超时脚本的问题求助（支持页面刷新/跳转）

看起来你的核心需求是在用户的一次浏览器会话中，脚本只执行一次，但当前代码的逻辑有漏洞：你在页面加载时就标记了visited，如果用户在10秒内刷新或跳转到其他页面，新页面里visited已经存在，且当前页不等于lastPage，导致定时器再也不会启动，而脚本其实还没真正执行过。

下面给你两种针对性的解决方案，根据你的实际需求选择：

方案1：用户在任意页面停留满10秒时触发，会话内仅一次 #

这个方案适合你希望用户在某个页面停留够10秒才触发提示，且整个会话只弹一次的场景：

// 先检查脚本是否已经执行过
const hasExecuted = sessionStorage.getItem('scriptExecuted');

if (!hasExecuted) {
  // 启动10秒定时器
  const alertTimer = setTimeout(() => {
    alert('Hello World');
    // 标记脚本已执行，会话内不再触发
    sessionStorage.setItem('scriptExecuted', 'true');
  }, 10000);

  // 可选优化：用户在定时器触发前离开页面时，清除定时器节省内存
  window.addEventListener('beforeunload', () => {
    clearTimeout(alertTimer);
  });
}

逻辑说明： #

• 用scriptExecuted专门标记脚本是否已经执行完成，而不是标记页面是否访问过
• 每次页面加载时，只有当脚本还没执行过，才会启动定时器
• 如果用户在10秒内跳页/刷新，定时器会被清除，到新页面后会重新启动定时器，直到用户在某个页面停留满10秒，触发提示后就再也不会执行了

方案2：会话开始后10秒触发，不管用户跳页与否 #

如果你希望从用户第一次进入站点开始算10秒，到点就触发提示（不管用户在哪个页面），可以用这个方案：

const hasExecuted = sessionStorage.getItem('scriptExecuted');
const sessionStart = sessionStorage.getItem('sessionStartTimestamp');

if (!hasExecuted) {
  let timeLeft = 10000; // 默认10秒

  if (sessionStart) {
    // 计算从会话开始到现在已经过了多久
    const elapsed = Date.now() - parseInt(sessionStart);
    // 剩余时间不能为负数
    timeLeft = Math.max(0, 10000 - elapsed);
  } else {
    // 第一次进入站点，记录会话开始时间
    sessionStorage.setItem('sessionStartTimestamp', Date.now().toString());
  }

  if (timeLeft > 0) {
    setTimeout(() => {
      alert('Hello World');
      sessionStorage.setItem('scriptExecuted', 'true');
      // 清理不必要的存储
      sessionStorage.removeItem('sessionStartTimestamp');
    }, timeLeft);
  } else {
    // 已经超过10秒了，直接执行
    alert('Hello World');
    sessionStorage.setItem('scriptExecuted', 'true');
    sessionStorage.removeItem('sessionStartTimestamp');
  }
}

逻辑说明： #

• 记录会话第一次启动的时间戳，跨页面共享这个时间
• 每次页面加载时，计算距离10秒还剩多久，剩余时间大于0就设置对应时长的定时器，到点触发
• 如果用户跳页时已经超过了10秒，会直接触发提示，避免遗漏

这两种方案都能解决你当前遇到的“10秒内跳页后脚本再也不执行”的问题，你可以根据实际业务需求选择~

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