window.scroll函数冻结Firefox [英] window.scroll function freezes firefox

问题描述

我正在处理一个带有固定菜单的页面，该菜单在用户从顶部滚动一定距离后会出现，并且当他们向下滚动页面时，菜单中不同的链接会被赋予一个可更改颜色的类.所有这些似乎在Chrome和Safari中都能很好地运行，但是在Firefox中，该页面冻结在顶部.我想知道它是否不断地在循环某些代码...本质上是冻结窗口.

I'm working on a page with a fixed menu that picks up after the user has scrolled a certain distance from the top, and as they scroll down the page, different links from the menu are given a class that changes the color. All of this seems to work well in Chrome and Safari, but in Firefox, the page freezes at the top. I'm wondering if it is looping through some code incessantly...essentially freezing the window.

这是我的代码.

$.localScroll({
    onBefore: function() {
        $('body').data('scroll-executing', true);

    },
    onAfter: function() {
        $('body').data('scroll-executing', false);
        $(window).trigger("scroll");
    }
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 259) {
        $('.nav').addClass("f-nav");
    } else {
        $('.nav').removeClass("f-nav");
    }
});

$(window).scroll(function() { 
    if ($('body').data('scroll-executing')) {
        return;
    }
    // find the a with class 'active' and remove it
    $("a").removeClass('active');
    // get the amount the window has scrolled
    var scroll = $(window).scrollTop();
    // add the 'active' class to the correct #nav based on the scroll amount

    if (scroll > 2150) {
        $("#nav_3").removeClass('active');
        $("#nav_5").attr('class', 'active');
        setHash("contact");

    } else if (scroll > 1300) {
        $("#nav_2").removeClass('active');
        $("#nav_3").attr('class', 'active');
        setHash("portfolio");

    } else if (scroll > 400) {
        $("#nav_2").attr('class', 'active');
        setHash("about");

    } else if (scroll <= 380) { //when I remove this section, the problem goes away.
        $("#nav_1").attr('class', 'active');
        setHash("home");
    }

});

我忘记添加setHash定义.在这里.

I forgot to add the setHash definition. Here it is.

setHash = function(hash) {
    var scrollmem = $('body').scrollTop();
    window.location.hash = hash;
    $('html,body').scrollTop(scrollmem);
}

我还注意到CPU达到了100％的运行速度，我似乎不知道为什么.

I also noticed that the CPU goes up to 100%, and I can't seem to figure out why.

问题出在代码的第三部分，从else if(滚动< = 380)开始.我通过消除过程弄清楚了这一点.有人能看到它循环播放或做一些永无止境的事情吗?或者会解释为什么Firefox冻结在页面顶部?

The problem is in the third section of code beginning with else if (scroll <= 380). I figured that out by process of elimination. Can anybody see it looping or doing something that will never end...or would explain why firefox freezes at the top of the page?

我是所有这些的新手……过去几天我刚开始使用jquery，基本上我一直在大量搜索和修改代码，以使其适合我的需求.

I'm new to all of this...I just picked up jquery in the past few days, and I have basically been googling a lot and adapting code so that it fits what I need.

任何帮助将不胜感激.

推荐答案

在滚动事件上执行太多代码是过大的，在每次滚动时，浏览器都会触发滚动事件数百次，您可以考虑使用具有throttle或debounce.

Executing too much code on scroll event is overkill, on each scroll, browsers trigger the scroll event hundred times, you can consider using a library that have methods like throttle or debounce.

http://documentcloud.github.com/underscore/#throttle

将处理程序附加到窗口滚动事件是一个非常非常糟糕的主意.根据浏览器的不同，滚动事件可能会触发很多事件，并且将代码放入滚动回调中会减慢任何尝试的速度滚动页面(不是一个好主意).结果，滚动处理程序中的任何性能下降都只会使总体滚动性能复杂化.取而代之的是，使用某种形式的计时器来检查每X毫秒或附加滚动事件，并仅在延迟(甚至在给定的执行次数后再延迟)之后运行代码，这会更好. http://ejohn.org/blog/learning-from-twitter/

It's a very, very, bad idea to attach handlers to the window scroll event. Depending upon the browser the scroll event can fire a lot and putting code in the scroll callback will slow down any attempts to scroll the page (not a good idea). Any performance degradation in the scroll handler(s) as a result will only compound the performance of scrolling overall. Instead it's much better to use some form of a timer to check every X milliseconds OR to attach a scroll event and only run your code after a delay (or even after a given number of executions - and then a delay). http://ejohn.org/blog/learning-from-twitter/

这篇关于window.scroll函数冻结Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！