滚动事件运行缓慢-有没有更轻松的方法

scroll event running slow - is there a lighter way?

本文关键字：方法 有没有 事件 运行 缓慢 滚动      更新时间：2024-04-26

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

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');
            }
        }
    }
}
}
});

我很想知道是否有一种不那么耗电的方式来做这件事，因为我真的很想在网站上看到这种效果。

干杯

使用本·阿尔曼的jQuery节流阀/防反弹

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

http://benalman.com/code/projects/jquery-throttle-debounce/jquery.ba-throttle-debounce.js

如果您只想延迟呼叫量，那么这可以在中工作

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秒。这意味着，它不会在这段时间内打5000万个电话，而是会打一个，这只会有所帮助。

你这样称呼它：

waitForFinalEvent(function() {
//stuff to do
}, 500, "randomString");

希望这能有所帮助！！将500调整为要延迟的时间。

原始帖子：JavaScript/JQuery:$（窗口）.调整大小如何在调整大小完成后激发？

相关文章：