Запускать анимацию только в окне просмотра

Question

У меня есть сайт, наполненный множеством текущих (зацикленных) javascript-анимаций, которые я хочу запускать только тогда, когда они появляются в окне просмотра, чтобы сохранить производительность.

Есть ли дешевый трюкдля достижения этого?идеи о том, как сохранить производительность в этом конкретном случае, очень приветствуются.

Я попробовал это так, но не работает.Возможно, потому что функция не запускается, когда triggerEffect превращается true:

var triggerEffect = false;

$(window).scroll(function(){

  var wScroll = $(window).scrollTop(),
      divTop = $('#effect-div').offset().top-$(window).height(),
      divBottom = $('#effect-div').offset().top+$('#effect-div').height();

  if (wScroll > divTop && wScroll < divBottom) {
    triggerEffect = true;
  } else {
    triggerEffect = false;
  }

});

$(document).ready(function loop() {
  setTimeout( function () {
    $("#effect-div").css("background-color", "blue")

    setTimeout(function () {
      $("#effect-div").css("background-color", "red")
    }, 200);
    if ( triggerEffect == true ) {
      loop();
    };

  }, 400);

});

для полного кода (включая html и css), проверьте это на CODEPEN

Answer 1

Я думаю, вам следует переместить функцию прокрутки внутрь функции готовности документа, поэтому в конце она должна выглядеть следующим образом:

    var triggerEffect = false;

    jQuery(document).ready(function(){
       jQuery(window).scroll(function(){

      var wScroll = $(window).scrollTop(),
          divTop = $('#effect-div').offset().top-$(window).height() / 1.2,
          divBottom = $('#effect-div').offset().top+$('#effect-div').height() / 1.2;

          console.log("wScroll "+wScroll);
          console.log("divTop "+divTop);
          console.log("divBottom "+divBottom);

      if (wScroll > divTop && wScroll < divBottom) {
        triggerEffect = true;
        loop();
      } else {
        triggerEffect = false;
      }

      console.log("triggerEffectSCROLL "+triggerEffect);

    });
    });

function loop() {
      console.log("triggerEffectLOOP "+triggerEffect);
      setTimeout( function () {
        jQuery("#effect-div").css("background-color", "blue")

        setTimeout(function () {
          jQuery("#effect-div").css("background-color", "red")
        }, 200);
        if ( triggerEffect == true ) {
          loop();
        };

      }, 400);

    }

    body {
      height: 3000px;
    }

    #effect-div {
      height: 300px;
      width: 500px;
      background-color: red;
      margin-top: 1000px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="effect-div">
</div>