Javascript 使用scroll（）获得大滞后

我正在尝试用jquery设置菜单的动画-只需根据滚动改变填充。它工作正常，但是执行起来需要非常长的时间（1-10秒）。有什么想法吗？我已经试过了。在（“滚动”）上，但没有改变

在Chrome和Firefox上

有趣的事情-如果我添加警报（v）；第三行后确保在滚动位置，动画效果良好，没有任何延迟；x

    <script>
        $(window).scroll(function() {
            var v = $(window).scrollTop();
            if (v >= 150) {
                $('#header').animate({"padding": "15px 0px"},500);
            }
            else if (v < 150 ) {
                $('#header').animate({"padding": "50px 0x"},500);
            }
        });
    </script>

$（窗口）。滚动（函数（）{
var v=$（window.scrollTop（）；
如果（v>=150）{
$（'#header'）。动画（{“padding”：“15px 0px”}，500）；
}
否则，如果（v<150）{
$（'#header'）。动画（{“padding”：“50px 0x”}，500）；
}
});

您可以在这里看到问题：

var IsCrolled=假；
$（窗口）。滚动（函数（）{
var v=$（window.scrollTop（）；
如果（v>=150&&！s角）{
$（'#header'）。动画（{“padding”：“15px 0px”}，500）；
Iscrowled=真；
}
否则，如果（v<150&&Iscrowled）{
$（'#header'）。动画（{“padding”：“50px 0x”}，500）；
Iscrowled=假；
}
});

var IsCrolled=假；
$（窗口）。滚动（函数（）{
var v=$（window.scrollTop（）；
如果（v>=150&&！s角）{
$（'#header'）。动画（{“padding”：“15px 0px”}，500）；
Iscrowled=真；
}
否则，如果（v<150&&Iscrowled）{
$（'#header'）。动画（{“padding”：“50px 0x”}，500）；
Iscrowled=假；
}
});

这是因为两个原因：A）滚动事件会在每个滚动像素时触发，B）每次都会计算很多

A） 非常容易修复，您可以限制它触发的事件数量。您可以将其设置为每20毫秒启动一次，这仍然非常快，但将节省大量通话

B） 限制你的计算。触发函数的频率越高，就越需要反复检查函数是否可以使其更轻

---

在您的例子中，您计算从顶部滚动多少，并设置每次调用的值。相反，您还希望存储已经超过阈值的数据。如果已经通过了它和scrollvalue>threshold，则无需再次将其设置为相同的值。向后滚动也是如此。检查布尔值非常快。

这是因为两个原因：a）滚动事件会在每个滚动像素时触发，B）每次都会计算很多

A） 非常容易修复，您可以限制它触发的事件数量。您可以将其设置为每20毫秒启动一次，这仍然非常快，但将节省大量通话

B） 限制你的计算。触发函数的频率越高，就越需要反复检查函数是否可以使其更轻

---

在您的例子中，您计算从顶部滚动多少，并设置每次调用的值。相反，您还希望存储已经超过阈值的数据。如果已经通过了它和scrollvalue>threshold，则无需再次将其设置为相同的值。向后滚动也是如此。检查布尔值的速度非常快。

滚动事件会在每个滚动像素上触发（或使用一些填充，但…）。您正在这里设置队列动画中的许多条目。@A.Wolff这应该是一个答案。@catbadger答案将是对它的一个修复，就像取消对事件的绑定，或者在处理程序中使用一些逻辑来处理已设置动画的元素。您真的需要在每次滚动发生时设置标题动画吗？似乎只有当卷轴越过

150

阈值时才应该有动画效果。@Santi是的，只有当卷轴越过150px时才应该有动画效果。如何更改？滚动事件在每个滚动像素上触发（或使用一些填充，但…）。您正在这里设置队列动画中的许多条目。@A.Wolff这应该是一个答案。@catbadger答案将是对它的一个修复，就像取消对事件的绑定，或者在处理程序中使用一些逻辑来处理已设置动画的元素。您真的需要在每次滚动发生时设置标题动画吗？似乎只有当卷轴越过

150

阈值时才应该有动画效果。@Santi是的，只有当卷轴越过150px时才应该有动画效果。我应该如何更改它？我可能会包括一行或两行来解释为什么/如何解决问题，但在任何情况下都是一个很好的答案。使用一个标志来控制它是否滚动超过

150px

。我可能会包括一行或两行来解释为什么/如何解决问题，但无论哪种情况，这都是一个很好的答案。使用一个标志来控制它是否滚动超过

150px

。感谢您为我清理它，现在它有意义了！谢谢你帮我清理，现在有意义了！

<script>
    var isScrolled = false;
    $(window).scroll(function() {
        var v = $(window).scrollTop();
        if (v >= 150 && !isScrolled) {
            $('#header').animate({"padding": "15px 0px"},500);
            isScrolled = true;
        }
        else if (v < 150 && isScrolled) {
            $('#header').animate({"padding": "50px 0x"},500);
            isScrolled = false;
        }
    });
</script>