Measure image time in a Boostrap carousel

Question

This might be a remarkable stupid question. I use setInterval to measure the total time that a user looks at a specific image in a bootstrap carousel, the total interval time, and the current index of the image.

In addition, I want to measure the time between the event when the picture slides into view and when the picture slides out of view in the bootstrap carousel. Not only the total time but also the time of the single event when the picture is visible.

Until now, I could not figure out a way to achieve my goal without completely changing the whole script. I thought about using setTimeout().

var intervalTime = 10;
var timesMilliseconds = {
  0: 0
};
var intervalMilliseconds = 0;
var currentSlideIndex = 0;
var interval;
var currentIndex;
var currentTotalTime;
var currentIntervalTime;
var search_behavior = {};


$('document').ready(function() {
  interval = setInterval(function() {
    if (timesMilliseconds.hasOwnProperty(currentSlideIndex)) {
      timesMilliseconds[currentSlideIndex] += intervalTime;
      intervalMilliseconds += intervalTime;
    } else {
      timesMilliseconds[currentSlideIndex] = intervalTime;
      intervalMilliseconds += intervalTime;
    }
  }, intervalTime);

  $('#carouselExampleControls').on('slide.bs.carousel', function(event) {
    currentIndex = currentSlideIndex.toString();
    currentTotalTime = timesMilliseconds[currentSlideIndex].toString();
    currentIntervalTime = intervalMilliseconds;
    currentSlideIndex = event.to;

    search_behavior = {
      current_index: currentIndex,
      current_interval: currentIntervalTime,
      total_time_index: currentTotalTime,
    }
    console.log(search_behavior)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">


<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/200/300" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/200/300" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/200/300" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>