如何包含一个计时器来指示在 bookblock.js slide/page 中花费的时间？

Question

我正在使用 bookblock.js 并尝试集成一个计时器来计算用户在每个 slide/page 上花费的秒数。我已经设法添加了计时器，但是 每次用户登陆新的 slide/page 时如何重置计时器？我还需要将花费的时间（以秒为单位）推送到 GTM dataLayer。

下面是我的代码供参考：

onBeforeFlip : function(page) { 

            var name = $(".bb-item").filter(function() { return $(this).css("display") == "block" }).attr("id");

            var startTimer = setInterval(function(){ 
                //console.log("seconds spent on this page");
            }, 1000);

            var d = new Date(1000*Math.round(startTimer/1000));
            function pad(i) { return ('0'+i).slice(-2); }
            var seconds = d.getUTCHours() + ':' + pad(d.getUTCMinutes()) + ':' + pad(d.getUTCSeconds());
            console.log(seconds);

            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({
                'event': 'slide',
                'slidename': name,
                'timespent': seconds
            });
        }

提前致谢！

Answer 1

这是您描述的计时器的一个简短示例。

$(function() {
  var secondsPassed = 0;
  var timer;
  var slideIndex = 0;

  function formatSeconds(s) {
    var h = 0,
      m = 0;
    h = Math.floor(s / 3600);
    s = s - (h * 3600);
    m = Math.floor(s / 60);
    s = s - (m * 60);
    return (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);
  }

  function startTimer() {
    timer = setInterval(function() {
      $(".timer").html(formatSeconds(++secondsPassed))
    }, 1000);
  }

  function resetTimer() {
    clearInterval(timer);
    secondsPassed = 0;
    $(".timer").html(formatSeconds(secondsPassed));
    startTimer();
  }

  $("#next-btn").click(function() {
    $(".slide").eq(slideIndex++).hide();
    resetTimer();
  });
  
  startTimer();
});

.slides {
  width: 340px;
  height: 340px;
  overflow: hidden;
  border: 1px solid black;
}

.slide {
  width: 300px;
  height: 300px;
  float: left;
  margin: 19px;
  border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slides">
  <div class="slide red">
    Slide 1
  </div>
  <div class="slide orange">
    Slide 2
  </div>
  <div class="slide yellow">
    Slide 3
  </div>
  <div class="slide green">
    Slide 4
  </div>
  <div class="slide blue">
    Slide 5
  </div>
  <div class="slide purple">
    Slide 6
  </div>
</div>
<button id="next-btn">Next</button>
<span class="timer">00:00:00</span>

在这里您可以看到我们创建了一些函数来帮助我们，startTimer 和 resetTimer。我还创建了 formatSeconds 来帮助格式化时间戳。

当页面加载且第一张幻灯片播放时，我们启动计时器。当他们点击下一步时，我们重置计时器。

如何包含一个计时器来指示在 bookblock.js slide/page 中花费的时间？

How to include a timer to indicate time spent in a bookblock.js slide/page?

javascript

jquery

setinterval

google-datalayer

bookblock