$(window).scroll 不够快，无法处理我的 jquery？答案

【问题标题】：$(window).scroll not fast enough to process my jquery?$(window).scroll 不够快，无法处理我的 jquery？
【发布时间】：2014-01-08 20:01:01
【问题描述】：

我遇到了窗口滚动问题，我认为事件触发得太快而无法处理。

我使用航路点来检测页面上的子导航在滚动时何时碰到标题，当它碰到标题时，它会将标题向上推离页面。当向上滚动时，标题会被拉到原来的位置。现在第一部分完美无缺，头部被推了起来，但把它拉回来是非常错误的。滚动太快会导致标题卡在途中。

它会像这样卡住：但它应该进一步下降：

如果你慢慢滚动它会起作用，但实际上它不会切割它。不幸的是，该网站尚未公开，所以我还不能链接到它。

        $('.subnav-wrapper').waypoint(function(direction) {
            var $headerWrapper = $('.header-wrapper');
            var headerHeight = $headerWrapper.outerHeight();

            $(window).scroll(function() { 
                var scrollHeight = $(this).scrollTop();

                if( scrollHeight >= 400 ) {
                     $headerWrapper.css( 'margin-top', ( scrollHeight - 400 ) * -1 );
                }
            });

        },
        {
            offset: $('.header-wrapper').outerHeight()
        });

【问题讨论】：

只是想知道为什么要在航点回调中嵌套滚动事件声明？在这里，每次触发 waypoints 事件时，您都在为窗口添加一个新的 onscroll 事件。当您滚动窗口时，航点会被触发，我猜这可能真的很麻烦。您可以检查在控制台中使用了多少 onscroll 事件：$._data(window,'events').scroll

标签： jquery scroll jquery-waypoints

【解决方案1】：

将.scroll 声明移到航点声明之外。

然后使用lodash .throttle 来限制执行次数。另外，让我们缓存 jQuery 窗口对象。

 var $window = $(window);
 $window.scroll(_.throttle(function () {
   var scrollHeight = $window.scrollTop();
   if (scrollHeight >= 400) {
     $headerWrapper.css('margin-top', (scrollHeight - 400) * -1);
   }
 }, 16), {
   trailing: true
 });

限制为 16ms 是一个很好的经验法则，因为它是 60hz 显示器的刷新率，而且用户不会注意到任何快于 16ms 的东西。

【讨论】：

看起来不错，但您实际上并不需要使用throttle 方法，只需使用带有clearTimeout()/setTimeout() 的基本逻辑就足够了。无论如何+1
_.throttle 的优点在于它的超级可靠和可读性，但更重要的是它的trailing : true 部分是一个真正的好处。
你看起来是个不错的插件。哦，我明白了，它是一种下划线的扩展，对吧？！
我刚刚包含了那个插件，但我得到了错误：i.handler.apply is not a function 我会到处玩，看看我能不能让它工作。
我刚刚尝试了 16ms 油门的油门/去抖动插件，但也没有用。 JS 运行了，但是当向下滚动太快时，标题仍然卡住。