jQuery提高了函数的性能

Question

我编写了一个自定义脚本，它检查当前视口位置，然后相应地在固定标题导航中突出显示当前项目。

导航项的顺序与偏移量变量声明的顺序相同。

我在scroll()上调用了这个函数，但我觉得这不是最好的性能，因为当用户滚动时，它会一直检查。也许更好的方法是在滚动事件结束时进行检查？但我找不到实现这一点的方法。

你知道我该如何提高功能的性能吗？

这是我的代码：

$window = $(window);
$window.scroll(function() {
            activeState();
        }
    );
function activeState() {
        var offsetHome = $('#Home').position().top;
        var offsetLeistungen = $('#Leistungen').position().top;
        var offsetPortfolio = $('#Portfolio').position().top;
        var offsetUeber = $('#Ueber').position().top;
        var offsetKontakt = $('#Kontakt').position().top;
        var headerHeight = $('.header').height();
        $('#PrimNav li').removeClass('active');
        if($window.scrollTop() <= offsetLeistungen - headerHeight) {
            $('#PrimNav li:nth-child(1)').addClass('active');
        } else  if($window.scrollTop() <= offsetPortfolio - headerHeight) {
            $('#PrimNav li:nth-child(2)').addClass('active');
        } else  if($window.scrollTop() <= offsetUeber - headerHeight) {
            $('#PrimNav li:nth-child(3)').addClass('active');
        } else  if($window.scrollTop() <= offsetKontakt - headerHeight) {
            $('#PrimNav li:nth-child(4)').addClass('active');
        } else {
            $('#PrimNav li:nth-child(5)').addClass('active');
        }
    };

谢谢！

Answer 1

如果元素的位置是固定的，那么您可以将声明从activateState（）函数中移出，因为每次滚动事件触发时，它都会再次声明这些变量，这并不是很有效。您也不必在每个if语句中都获得$（window）.sollTop（）值。在滚动事件上计算一次，并将其值传递给activateState（）；

更新：

var offsetHome = 0;
var offsetLeistungen = 0;
var offsetPortfolio = 0;
var offsetUeber = 0;
var offsetKontakt = 0;
var headerHeight = 0;
$window = $(window);
$window.scroll(function() {
            activeState($window.scrollTop());
        }
    );
function activeState(scrollTop) {
       offsetHome = $('#Home').position().top;
       offsetLeistungen = $('#Leistungen').position().top;
       offsetPortfolio = $('#Portfolio').position().top;
       offsetUeber = $('#Ueber').position().top;
       offsetKontakt = $('#Kontakt').position().top;
       headerHeight = $('.header').height();
        $('#PrimNav li').removeClass('active');
        if(scrollTop <= offsetLeistungen - headerHeight) {
            $('#PrimNav li:nth-child(1)').addClass('active');
        } else  if(scrollTop <= offsetPortfolio - headerHeight) {
            $('#PrimNav li:nth-child(2)').addClass('active');
        } else  if(scrollTop <= offsetUeber - headerHeight) {
            $('#PrimNav li:nth-child(3)').addClass('active');
        } else  if(scrollTop <= offsetKontakt - headerHeight) {
            $('#PrimNav li:nth-child(4)').addClass('active');
        } else {
            $('#PrimNav li:nth-child(5)').addClass('active');
        }
    };