Подсчитывает от 1 до 1500 за 3 секунды jQuery isInViewport

Question

Я сделал этот скрипт от 1 до 1500 за 3 секунды. Это хорошо работает. Но этот div показан в нижней части веб-сайта, и я бы хотел, чтобы он учитывался только тогда, когда он находится в окне просмотра. Я загрузил плагин isInViewport jQuery и попытался объединить два сценария. Но это не работает. Может ли кто-нибудь мне помочь?

<script type="text/javascript"> 
      var time = setInterval(function(){TimeNumber();},2); 
      var iState = 1; 
      var ifSeen = 0; 

      function TimeNumber() 
      { 
       document.getElementById("time").innerHTML = iState; 

       if (ifSeen==1) { 
       iState++; 
       } 

       if (iState > 1500) { 
       iState = 1500; 
       } 
      } 

      jQuery(document).ready(function ($) { 
       "use strict"; 

       /* activate pause for lightbulb video if scrolled out of viewport */ 
       $(window).scroll(function() { 
       $('time').each(function(){ 
        if ($(this).is(":in-viewport(1000)")) { 
         ifSeen=1; 
        } else { 
         ifSeen=0; 
        } 
        }); 
       }); 
      }); 
     </script> 

Answer 1

Я внес некоторые изменения в ваш код, чтобы надеяться сделать его немного яснее.

jQuery(document).ready(function ($) { 
    "use strict"; 
    var intervalId = setInterval(function(){TimeNumber();},2); 
    var iState = 1; 
    var ifSeen = false; 
    var $timeElem = $("#time"); 
    function TimeNumber() 
    { 
    $timeElem.text(iState); 
    if (ifSeen) { 
     iState++; 
    } 

    if (iState > 1500) { 
     iState = 1500; 
     clearInterval(intervalId); 
    } 
    } 

    /* activate pause for lightbulb video if scrolled out of viewport */ 
    $(window).scroll(function() { 
    ifSeen = $timeElem.is(":in-viewport()"); 
    }); 
}); 

Я положил все внутри функции ready, так что вы можете иметь доступ к элементу. Я создал переменную $timeElem, чтобы удерживать ваш элемент, так как вы будете обращаться к нему столько раз. Я повернул ifSeen в логическое значение и установил его непосредственно с помощью .is("in-viewport()"). Я не мог заставить атрибут tolerance работать (даже после добавления более 1000 пикселей содержимого), но это должно дать вам общую идею. Я также очищаю интервал, так что, как только счетчик достигнет 1500, он останавливается.

JSFiddle: https://jsfiddle.net/m95833e5/