如何实现页面无操作5分钟后弹出价格过期提示窗口？

实现思路 #

• 监听用户三类操作事件：鼠标点击（click）、页面滚动（scroll）、键盘输入（keydown）
• 每次监听到有效操作后重置闲置计时器
• 计时器累计到5分钟无操作时，触发价格过期弹窗
• 弹窗内置刷新按钮，点击后直接重载当前页面

完整实现代码 #

1. HTML 弹窗结构 #

<!-- 价格过期弹窗 默认隐藏 -->
<div id="priceExpireModal" class="modal">
  <div class="modal-content">
    <p>价格已过期，请刷新页面后重新查看</p>
    <button id="refreshBtn">刷新页面</button>
  </div>
</div>

2. CSS 弹窗样式 #

/* 遮罩层样式 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 9999;
}
/* 弹窗内容样式 */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 2rem 3rem;
  border-radius: 8px;
  text-align: center;
}
/* 刷新按钮样式 */
#refreshBtn {
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  background: #1677ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#refreshBtn:hover {
  background: #4096ff;
}

3. JS 核心逻辑 #

// 配置闲置超时时间：5分钟 = 5 * 60 * 1000 = 300000毫秒
const IDLE_TIMEOUT = 300000;
// 防抖时间：避免滚动事件频繁触发重置操作，可按需调整
const DEBOUNCE_DELAY = 300;

let idleTimer = null;
let debounceTimer = null;

// 重置闲置计时器
function resetIdleTimer() {
  // 清除原有计时器
  if (idleTimer) clearTimeout(idleTimer);
  // 重新开始计时
  idleTimer = setTimeout(showExpireModal, IDLE_TIMEOUT);
}

// 防抖处理的重置函数，用于高频触发的scroll事件
function debouncedReset() {
  if (debounceTimer) clearTimeout(debounceTimer);
  debounceTimer = setTimeout(resetIdleTimer, DEBOUNCE_DELAY);
}

// 显示过期弹窗
function showExpireModal() {
  const modal = document.getElementById('priceExpireModal');
  modal.style.display = 'block';
  // 弹窗显示后移除事件监听，避免不必要的性能消耗
  removeIdleListeners();
}

// 绑定需要监听的用户操作事件
function addIdleListeners() {
  document.addEventListener('click', resetIdleTimer);
  document.addEventListener('keydown', resetIdleTimer);
  document.addEventListener('scroll', debouncedReset);
}

// 移除监听事件
function removeIdleListeners() {
  document.removeEventListener('click', resetIdleTimer);
  document.removeEventListener('keydown', resetIdleTimer);
  document.removeEventListener('scroll', debouncedReset);
  if (idleTimer) clearTimeout(idleTimer);
  if (debounceTimer) clearTimeout(debounceTimer);
}

// 页面加载完成后初始化
window.addEventListener('load', () => {
  addIdleListeners();
  resetIdleTimer();
  // 绑定刷新按钮点击事件
  document.getElementById('refreshBtn').addEventListener('click', () => {
    location.reload();
  });
});

注意事项 #

• 如果页面嵌套了iframe，需要单独给iframe内容页也添加相同的事件监听，否则iframe内的用户操作无法被父页面捕获，会导致误触发弹窗
• 可按需修改IDLE_TIMEOUT的数值调整超时等待时间，单位为毫秒
• 当前方案弹窗弹出后不会自动关闭，也不支持点击遮罩关闭，避免用户忽略价格过期提示继续操作，可根据业务需求自行添加关闭逻辑

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