问JavaScript -检测元素是否在视口中停留n秒

EN

console.clear();

var scrolling = false;
var scrolling_timeout;
var reading_check_interval;
var reading_check_delay = 5;    // seconds
var completePartial = false;     // "true" to include partially in viewport
var monitored_elements = $(".target");
var visible_begins = [];


// Scroll handler
$(window).on("scroll",function(){
  if(!scrolling){
    console.log("User started scrolling.");
  }
  scrolling = true;

  clearTimeout(scrolling_timeout);
  scrolling_timeout = setTimeout(function(){
    scrolling = false;
    console.log("User stopped scrolling.");

    // User stopped scrolling, check all element for visibility
    monitored_elements.each(function(){
      if($(this).visible(completePartial)){
        console.log(this.id+" is in view.");

        // Check if it's already logged in the visible_begins array
        var found = false;
        for(i=0;i<visible_begins.length;i++){
          if(visible_begins[i].id == this.id){
            found = true;
          }
        }
        if(!found){
          // Push an object with the visible element id and the actual time
          visible_begins.push({id:this.id,time:new Date().getTime()});
        }
      }
    });
  },200);   // scrolling delay, 200ms is good.
}); // End on scroll handler


// visibility check interval
reading_check_interval = setInterval(function(){
  monitored_elements.each(function(){
    if($(this).visible(completePartial)){
      // The element is visible
      // Check all object in the array to fing this.id
      for(i=0;i<visible_begins.length;i++){
        if(visible_begins[i].id == this.id){
          var now = new Date().getTime();
          var readTime = ((now-visible_begins[i].time)/1000).toFixed(1);
          console.log(visible_begins[i].id+" is in view since "+readTime+" seconds.")
        }

      }
    }else{
      // The element is not visible
      // Remove it from thevisible_begins array if it's there
      for(i=0;i<visible_begins.length;i++){
        if(visible_begins[i].id == this.id){
          visible_begins.splice(i,1);
          console.log(this.id+" was removed from the array.");
        } 
      }
    }
  });
},reading_check_delay*1000);  // End interval

.target{
  height:400px;
  border-bottom:2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.2.0/jquery.visible.min.js"></script>

<div id="one" class="target">1</div>
<div id="two" class="target">2</div>
<div id="three" class="target">3</div>
<div id="four" class="target">4</div>
<div id="five" class="target">5</div>
<div id="six" class="target">6</div>
<div id="seven" class="target">7</div>
<div id="eight" class="target">8</div>
<div id="nine" class="target">9</div>
<div id="ten" class="target">10</div>

function isElementInViewport (el) {

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

<input id="inViewport"/>
<span style="margin-left: 9999px;" id="notInViewport">s</span>
<script>
function isElementInViewport (el) {

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}
console.log("#inViewport in viewport: "+isElementInViewport(document.getElementById("inViewport")));
console.log("#notInViewport in viewport: "+isElementInViewport(document.getElementById("notInViewport")));
</script>