jquery - 在滚动和停止方法排队时优化 JQuery

Question

我在滚动时使用 JQuery，它的运行次数显然与用户滚动的次数一样多，但是如果用户上下滚动速度足够快，动画就会滞后。我假设这是因为每次滚动完成时都会执行该方法。我已尽我所能优化下面的代码，如果您有任何改进想法，请告诉我!

$( document ).ready(function() {
    var count = 0;
    var speed = 100;
    var triggerY = 50;
    $(window).on('scroll', function() {
        count++;
        if (count>10) {
            var currentY = window.pageYOffset;
            if (currentY < triggerY) {
                if ($('#accountHolder').height() != 70) {
                    $('#barTitle').animate({fontSize: "40px"}, speed);
                    $('#barSlogan').fadeIn();
                    $('#accountHolder').animate({height: "70px"}, speed);
                    $('#accountPosition').animate({top: "13px"}, speed);
                }
             } else {
                if ($('#accountHolder').height() != 60) {
                    $('#barTitle').animate({fontSize: "32px"}, speed);
                    $('#barSlogan').fadeOut();
                    $('#accountHolder').animate({height: "50px"}, speed);
                    $('#accountPosition').animate({top: "5px"}, speed);
                }
            }
            count = 0;
        }
    });
});

Answer 1

scroll 事件是一个非常昂贵的操作，因为每次用户在绑定(bind)元素上滚动时都会触发它。

如果您追求性能，请使用 CSS 动画而不是 JS 动画。 CSS 动画速度更快且无延迟。

这就是我的意思。

$( document ).ready(function() {
    var count = 0;
    var speed = 100;
    var triggerY = 50;
    $(window).on('scroll', function() {
        count++;
        if (count>10) {
            var currentY = window.pageYOffset;
            if (currentY < triggerY) {
                if ($('#accountHolder').height() != 70) {
                    $('#barTitle').addClass('increase-font-size')
                    $('#barSlogan').addClass('show');
                    $('#accountHolder').addClass('increase-height');
                    $('#accountPosition').addClass('pull-down');
                }
             } else {
                if ($('#accountHolder').height() != 60) {
                    $('#barTitle').removeClass('increase-font-size')
                    $('#barSlogan').removeClass('show');
                    $('#accountHolder').removeClass('increase-height');
                    $('#accountPosition').removeClass('pull-down');
                }
            }
            count = 0;
        }
    });
});

这些类应该有动画样式。

.increase-font-size {
    font-size: 40px;
    -webkit-transition: font 2s;
    transition: font 2s;
}
.show {
    opacity: 1;
    -webkit-transition: opacity 2s;
    transition: opacity 2s;
}
.increase-height {
    height: 70px;
    -webkit-transition: height 2s;
    transition: height 2s;
}
.pull-down {
    top: 13px;
    -webkit-transition: top 2s;
    transition: top 2s;
}