Javascript 滚动事件运行缓慢-是否有更轻松的方式？

我有下面的滚动事件，滚动测量用户在页面中的位置，并根据他们所在的部分更新导航样式。问题是我在scroll上执行的计算非常繁杂，在滚动时会稍微减慢页面速度。这是我的密码：

screenHeight = $(window).height();
screenHeightRatio = screenHeight*0.3;
//here I calculate screen height plus the ratio of the screen height I would like for the menu elements to change

aboutOffset = $(".aboutcontainer").offset().top - screenHeightRatio;
portfolioOffset = $(".portfoliocontainer").offset().top - screenHeightRatio;
musicOffset = $(".musiccontainer").offset().top - screenHeightRatio;
contactOffset = $(".contactcontainer").offset().top - screenHeightRatio;
// here I calculate the offset for each section in the screen



$(window).scroll(function(){
var amountScrolled = $(document).scrollTop();
//here I see how far down the page the person has scrolled

if($(".header-options").hasClass("portfolio-inner-active")) { 
return;
// here I cancel the scroll event if they are in a certain section

} else {

if(contactOffset <= amountScrolled) {
// each of the following if statements will calculate if the amount scrolled surpasses the various section offsets I defined outside of the scroll function

    $(".header-options li").removeClass("active");
    $(".contactbutton").addClass("active");
 history.pushState('page2', 'Title', '/contact');
    return;
    } else {
        if(musicOffset <= amountScrolled) {
        $(".header-options li").removeClass("active");
        $(".musicbutton").addClass("active");
    history.pushState('page2', 'Title', '/music');
        return;
        } else {
            if(portfolioOffset <= amountScrolled) {
            $(".header-options li").removeClass("active");
            $(".portfoliobutton").addClass("active");
 history.pushState('page2', 'Title', '/portfolio');
            return;
            } else {
                if(aboutOffset <= amountScrolled) {
                $(".header-options li").removeClass("active");
                $(".aboutbutton").addClass("active");
             history.pushState('page2', 'Title', '/about');
            }
        }
    }
}
}

});

screenHeight=$（window.height（）；
屏幕高度比=屏幕高度*0.3；
//这里我计算屏幕高度加上我希望菜单元素改变的屏幕高度的比率
aboutofset=$（“.aboutcontainer”）.offset（）.top-screenHeightRatio；
portfolioOffset=$（“.portfoliocontainer”）.offset（）.top-screenHeightRatio；
musicOffset=$（“.musiccontainer”）.offset（）.top-screenHeightRatio；
contactOffset=$（“.contactcontainer”）.offset（）.top-屏幕高度比；
//这里我计算屏幕中每个部分的偏移量
$（窗口）。滚动（函数（）{
var amountScrolled=$（document.scrollTop（）；
//在这里，我看到这个人在页面下方滚动了多远
if（$（“.header options”）.hasClass（“公文包内部活动”）{
返回；
//在这里，我取消滚动事件，如果他们在某个部分
}否则{
如果（contactOffset如果您希望延迟通话量，那么这可能会起作用

var waitForFinalEvent = (function () {
      var timers = {};
      return function (callback, ms, uniqueId) {
        if (!uniqueId) {
          uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
          clearTimeout (timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
      };
    })();

这是我在这里找到的一些代码事实上，请原谅我，我没有链接回原始源的url。这将在滚动后延迟调用X秒。这意味着，它不会在该时间范围内调用50个bigillion调用，而是会调用一个，这只会有所帮助

你这样称呼它：

waitForFinalEvent(function() {

//stuff to do

}, 500, "randomString");

希望这有帮助！！将500调整为您想要延迟的时间量

原始帖子：
如果你只是想延迟通话量，那么这就行了

var waitForFinalEvent = (function () {
      var timers = {};
      return function (callback, ms, uniqueId) {
        if (!uniqueId) {
          uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
          clearTimeout (timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
      };
    })();

这是我在这里找到的一些代码事实上，请原谅我，我没有链接回原始源的url。这将在滚动后延迟调用X秒。这意味着，它不会在该时间范围内调用50个bigillion调用，而是会调用一个，这只会有所帮助

你这样称呼它：

waitForFinalEvent(function() {

//stuff to do

}, 500, "randomString");

希望这有帮助！！将500调整为您想要延迟的时间量

原文：本·阿尔曼使用

$(window).scroll( $.throttle( 250, function(){...} ) );

本·阿尔曼使用

$(window).scroll( $.throttle( 250, function(){...} ) );

，似乎合乎逻辑，将立即对此进行尝试并测量性能我将继续搜索原始帖子，我将在找到后进行更新。我不想为其他人的工作获得荣誉。感谢你的努力，Kyle，最终Ryan提出的插件完成了这一把戏，符合逻辑，将立即对此进行尝试并测量性能继续搜索原始帖子，我会在找到后更新。我不想因为别人的工作而获得荣誉。谢谢你的努力，凯尔，最终Ryan提出的插件做到了这一点，这里有更多关于这一点的信息：插件现在工作得很好，性能更流畅了。非常感谢Cellent point，这里是m任何人的更多信息：插件工作了一个待遇和性能更顺利了。非常感谢