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

I am using bookblock.js and am trying to integrate a timer to count how many seconds a user spends on each slide/page. I have managed to include the timer, but how do I reset the timer each time the user lands on a new slide/page? I will also need to push the time spent in seconds to GTM dataLayer.

Below is my code for reference:

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
            });
        }

Thanks in advance!

CodePudding user response：

Here is a brief example of a timer as you described.

$(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>

Here you can see that we have created a few functions to help us, startTimer and resetTimer. I also created formatSeconds to help format the Time stamp.

When the page loads, and the first slide is up, we start the timer. When they click next, we reset the timer.