仅在视口中运行动画

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>