Javascript 为什么我的动画在Firefox中被延迟？如何改进此滚动脚本？

我很难在Firefox中及时执行这段代码。它在铬合金中似乎工作得很好

请点击此处：

我在这里使用的实时示例页面：

我不确定我是否遗漏了什么。我是通过阅读其他人编写的一系列页面滚动脚本而拼凑起来的。不确定这是否是我想要完成的事情的最佳方式（也就是在下一个区域变暗，直到有点暴露出来为止）（我用了一半的时间）

以下是我的javascript：

$(document).ready(function(){
 $(window).scroll(function(){
  $('.dark').each(function(i){

   var half_object = $(this).position().top + ($(this).outerHeight()/2);
   var bottom_window = $(window).scrollTop() + $(window).height();
   var bottom_object = $(this).position().top + $(this).outerHeight();

   if(bottom_window > half_object){
    $(this).animate({'opacity':'1'},200);
   }
   else if(bottom_object > $(window).scrollTop()) {
    $(this).animate({'opacity':'.5'},200);
   }
  });
 });
});

有更好的方法吗？我试着添加/删除css类，但它引发了一些我不满意的疯狂Chrome bug

---

为什么它在Firefox中工作得这么慢？

首先不要有6个单独的jQuery

$（此）

操作和多个

$（窗口）

！尽可能使用临时变量以避免重新查询

JSFIddle：

等等，直到你不做任何两次你不需要的有开销的事情

更新：停止以前的动画 暂停不是由上述代码的速度引起的，而是由于没有停止多个动画。问题是

滚动

频繁触发，因此没有

。停止（）

动画会排队并一个接一个地触发。这使它看起来比实际情况慢得多

---

进一步的优化可能只涉及屏幕上的处理元素，但考虑到目前明显的速度，这是毫无意义的。

首先不要有6个单独的jQuery

$（这）

操作和多个

$（窗口）

！尽可能使用临时变量来避免重新查询

JSFIddle：

等等，直到你不做任何两次你不需要的有开销的事情

更新：停止以前的动画 暂停不是由上述代码的速度引起的，而是由于没有停止多个动画。问题是

滚动

频繁触发，因此没有

。停止（）

动画会排队并一个接一个地触发。这使它看起来比实际情况慢得多

---

进一步的优化可能只涉及处理屏幕上的元素，但考虑到目前明显的速度，这是毫无意义的。

您可以缓存变量，这对：

$(document).ready(function(){
    var $window = $(window);

    $window.scroll( function(){
        $('.dark').each(function(i){
            var $this = $(this);
            var outerHeight = $this.outerHeight();
            var positionTop = $this.position().top;
            var half_object = positionTop + (outerHeight/2);
            var bottom_window = window.scrollTop() + window.height();
            var bottom_object = positionTop + outerHeight;

            if(bottom_window > half_object){
                $this.animate({'opacity':'1'}, 200);
            } else if(bottom_object > window.scrollTop()) {
                $this.animate({'opacity':'.5'}, 200);
            }
        });
    });
});

---

您可以缓存您的变量，这应该会稍微有帮助：

$(document).ready(function(){
    var $window = $(window);

    $window.scroll( function(){
        $('.dark').each(function(i){
            var $this = $(this);
            var outerHeight = $this.outerHeight();
            var positionTop = $this.position().top;
            var half_object = positionTop + (outerHeight/2);
            var bottom_window = window.scrollTop() + window.height();
            var bottom_object = positionTop + outerHeight;

            if(bottom_window > half_object){
                $this.animate({'opacity':'1'}, 200);
            } else if(bottom_object > window.scrollTop()) {
                $this.animate({'opacity':'.5'}, 200);
            }
        });
    });
});

---

---

我意识到已经有了一个公认的答案，但很多时候，只有在用户停止滚动后才做一些事情是有用的，而不是每次“滚动”事件触发。此事件每秒可触发50次以上，留给您约20毫秒的时间来完成需要执行的操作。仅在滚动停止后向您演示如何执行操作。正如@TrueBlueAusie在其回答中提到的，您仍然希望停止当前正在运行的任何动画。

我意识到已经有一个已接受的回答是，但很多时候，只有在用户停止滚动后才执行某些操作是有用的，而不是每次“滚动”事件触发。此事件每秒可触发50次以上，留给您约20毫秒的时间来完成您需要执行的操作。仅在滚动停止后向您演示如何执行操作。正如@TrueBlueAusie在其回答中提到的，您仍然希望停止当前正在运行的任何动画。

我以为codereview是专为wor设计的king代码？我不认为它目前能工作……我不确定你说的慢是什么意思，它在FF30中似乎对我来说工作得很好。对于像滚动式事件处理程序一样快速启动的事件处理程序的经验法则：如果你能帮得上忙，不要在其中执行DOM查询！DOM查询是执行的昂贵操作。缓存你的

$（'.dark'））

scroll handler函数之外的变量中的查询。ajp15243：谢谢，我对js还是很陌生，所以我现在将进一步探讨。Igor：“game3”和“game4”div在“game2”之后变为完全不透明度是否需要一秒钟左右div已经被解雇了？我正试图在它进入视野的一半时立即发生。还有…为什么在这个问题上投反对票？新手总是因为不是专家问题而获得反对票吗？令人沮丧。+1提供JSFIDLE:）我以为codereview是专为工作代码设计的？我不知道你说的慢是什么意思，它在FF30中对我来说似乎工作得很好。对于像滚动处理程序一样快速启动的事件处理程序，经验法则是：如果你能帮助的话，不要在其中执行DOM查询！DOM查询执行起来代价高昂。将您的

$（'.dark'）

查询缓存在scroll handler函数之外的变量中。ajp15243：谢谢，我对js还是相当陌生，所以我现在将进一步探讨。Igor：“game2”div启动后，“game3”和“game4”div变为完全不透明不是需要一整秒钟左右吗？我正试图让它在看到一半的时候立即发生。也。。。为什么在这个问题上投反对票？不熟悉某件事的人总是因为不是专家问题而被否决吗？令人沮丧。+1用于提供JSFIDLE:）谢谢，这似乎加快了速度。它似乎仍然有相当多的停顿，我不知道为什么。@ChaBuku：停顿是由于没有停止多个动画造成的（最新版本中已修复）。见上面。谢谢！这很有效。也从你的回答中学到了一点。@freshyeball:有趣的链接。我也得试试。在这种情况下不需要，因为它只需要刷新动画队列。@TrueBlueAussie它在您的情况下是有益的，因为滚动事件每秒将触发多次，并且此代码每秒将执行多次，其中用户每帧仅受益一次（16ms）。使用

油门

您不会浪费任何周期。谢谢，这似乎加快了速度。还是