仅在视口中运行动画

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>