Загрузка Javascript, когда элемент находится в поле зрения

Question

Таким образом, я получил некоторую помощь в создании элемента javascript, который вращается от "0" до "190", однако, это срабатывает, когда элемент находится в поле зрения - поэтому я подумал - оказывается, что число увеличивается ТОЛЬКО при прокрутке.... Например:

Автор сценария:

    var totalShipped = 190;
    var shippedDisplay = 0;
    var shippedStep = totalShipped / (2 * 1000 / 100); // Animation duration 2 sec
    $(allInView);
$(window).scroll(allInView);


function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
    function allInView() {
      if (shippedDisplay > totalShipped)
        shippedDisplay = totalShipped;
      document.getElementById("shipped").innerHTML = Math.round(shippedDisplay);
      if (shippedDisplay < totalShipped) {
        shippedDisplay += shippedStep;
        setTimeout(animateShipped, 100);
      }
    }
    animateShipped();

HTML:

<span id="shipped"></span>

Я хочу, чтобы элемент автоматически вращался от 0 до 190 ТОЛЬКО, когда элемент находится в поле зрения браузера и НЕ действует при прокрутке....

Как это сейчас: https://gyazo.com/6cd38177c44e97f0fa4f2b4d05ece5c3

В идеале я хочу, чтобы все числа вращались, но давайте сейчас сосредоточимся на "190", когда с точки зрения браузера - любые советы или предложения будут с благодарностью.

Answer 1

Я бы предложил установить таймер при загрузке страницы и использовать этот плагин Jquery Visible, чтобы проверить, виден ли ваш элемент перед увеличением.

Надеюсь, это поможет.

Answer 2

Предполагая, что ваша функция isScrolledIntoView(elem) работает, вы можете сделать что-то вроде этого:

window.setInterval(function(){
  if(isScrolledIntoView($('#shipped'))){
    allInView();
  }
}, 100);

Он будет проверять каждые 100 мс, виден ли ваш промежуток, и затем вызывать функцию allInView(), которая затем будет анимировать вращение.

Если вы не хотите никаких накладных расходов, если элемент не виден, вы можете соответственно деактивировать интервал:

var interval = null;
function checkForAnimation(){
    if(isScrolledIntoView($('#shipped'))){
        interval = window.setInterval(function(){
                allInView();
            }, 100);
        }
    else{
        clearInterval(interval);
    }
}
$(window).scroll(checkForAnimation);

Answer 3

Вы можете использовать setInterval(allInView(), 2);