如何为bookblock.js幻灯片添加计时功能统计每页停留时长并实现翻页重置

你现有代码的核心问题有2个：

• setInterval的返回值是计时器的唯一ID，不是时间值，你用这个ID来计算停留时间的逻辑完全错误
• 计时器没有全局存储，每次翻页都会生成新的计时器，旧计时器会一直在后台运行，造成内存泄漏和数据错误

实现思路 #

用时间戳差值计算停留时长，比定时器累加更精准，逻辑更简单：

1. 全局存储2个变量：计时器ID、当前页面进入的时间戳
2. 翻页前（onBeforeFlip触发时）：先计算上一页的停留时长、推送到dataLayer，再清除旧计时器
3. 翻页完成后初始化新页面的计时
4. 页面首次加载时主动触发第一页的计时

完整实现代码 #

// 全局存储计时相关变量
let pageEntryTime = null;
let pageTimer = null;

// 时间补0工具函数
function pad(i) { 
  return ('0'+i).slice(-2); 
}

// 停留时长计算+GTM上报函数
function reportPageStay(pageId) {
  if (!pageEntryTime) return;
  // 计算停留毫秒数转成时分秒格式
  const stayMs = Date.now() - pageEntryTime;
  const d = new Date(stayMs);
  const timeStr = `${d.getUTCHours()}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`;
  
  // 推送到dataLayer
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'slide',
    'slidename': pageId,
    'timespent': timeStr
  });
  console.log(`页面${pageId}停留时长：`, timeStr);
}

// BookBlock 配置
const bookBlock = new BookBlock( '#your-bookblock-container', {
  // 其他原有配置保留
  onBeforeFlip : function(currentPageIndex) { 
    // 1. 先获取当前要离开的页面ID
    const currentPageId = $(".bb-item").filter(function() { 
      return $(this).css("display") == "block" 
    }).attr("id");
    
    // 2. 上报上一页的停留数据
    reportPageStay(currentPageId);
    
    // 3. 清除旧计时器
    if (pageTimer) {
      clearInterval(pageTimer);
      pageTimer = null;
    }
  },
  onAfterFlip : function(newPageIndex) {
    // 4. 翻页完成后，初始化新页面的计时
    pageEntryTime = Date.now();
    // 如果需要实时打印停留时间可以保留下面的定时器，不需要可以删掉
    pageTimer = setInterval(() => {
      const stayMs = Date.now() - pageEntryTime;
      const d = new Date(stayMs);
      console.log('当前页面已停留：', `${d.getUTCHours()}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`);
    }, 1000);
  }
});

// 页面初始化时，启动第一页的计时
pageEntryTime = Date.now();
pageTimer = setInterval(() => {
  const stayMs = Date.now() - pageEntryTime;
  const d = new Date(stayMs);
  console.log('当前页面已停留：', `${d.getUTCHours()}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`);
}, 1000);

注意事项 #

• 把代码里的#your-bookblock-container替换成你实际的BookBlock容器选择器
• 如果不需要实时打印停留时长，可以删掉两处setInterval的逻辑，只靠时间戳差值计算的时长已经完全准确，不需要定时器累加

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