Question

我目前正在尽力学习jQuery并在下面创建了代码。它所做的就是删除并更改页面上特定点的类。我的问题是，这段代码对性能有多大影响，因为我意识到在每一个鼠标滚动中，语句都会运行或者这可以忽略不计。

感谢您提供的任何帮助。

我的代码：

function removeActive() {
    $('#vtop ul li').each(function () {
        $(this).children('a').removeClass('active');
    });
}
$(window).scroll(function () {
    var pos = $(window).scrollTop();
    if (pos <= '521') {
        removeActive();
        $('#m-intro a').addClass('active');
    } else if (pos >= '1108' && pos <= '1626') {
        removeActive();
        $('#m-nosales a').addClass('active');
    } else if (pos >= '2220' && pos <= '2742') {
        removeActive();
        $('#m-crates a').addClass('active');
    } else if (pos >= '3332' && pos <= '3860') {
        removeActive();
        $('#m-packages a').addClass('active');
    } else if (pos >= '4444' && pos <= '4966') {
        removeActive();
        $('#m-signup a').addClass('active');
    } else if (pos >= '5556') {
        removeActive();
        $('#m-contact a').addClass('active');
    }
    $('#divd').text(pos);
});

Answer 1

$('#vtop ul li').each(function(){
    $(this).children('a').removeClass('active');
});

可以简化为

$('#vtop ul li > a').removeClass('active');

就滚动事件中的if语句而言，我没有看到任何错误或者会导致严重的减速。

Answer 2

不了解性能但是这样的东西更容易阅读。没有尝试过，但你明白了......另一种选择是使用switch语句。

var elms = {
    intro: { min: 0, max: 521 },
    nosales: { min: 1108, max: 1626 },
    crates: { min: 2220, max: 2742 },
    packages: { min: 3332, max: 3860 },
    signup: { min: 4444, max: 4966 },
    contact: { min: 5556, max: $(window).height() }
};
$(window).scroll(function () {
    var pos = $(window).scrollTop();
    for (var el in elms) {
        var min = elms[el].min,
            max = elms[el].max;
        if (pos >= min && pos <= max) {
            $('#vtop ul li > a').removeClass('active');
            $('#m-' + elms[el]).addClass('active');
            break;
        }
    }
});

Answer 3

我会添加一个状态，确保您不需要时检查。否则，落在其中一个区域中的每个像素都将清除并设置活动状态。这比做一些简单的边界检查更昂贵。此外，首先进行状态比较，因为它更可能是错误的。

function removeActive() {
    $('#vtop ul li > a').removeClass('active');
}

var active = '';
$(window).scroll(function () {
    var pos = $(window).scrollTop();
    if (active != 'intro' && pos <= '521') {
        removeActive();
        active = 'intro';
        $('#m-intro a').addClass('active');
    } else if (active != 'nosales' && pos >= '1108' && pos <= '1626') {
        removeActive();
        active = 'nosales';
        $('#m-nosales a').addClass('active');
    } else if (active != 'crates' && pos >= '2220' && pos <= '2742') {
        removeActive();
        active = 'crates';
        $('#m-crates a').addClass('active');
    } else if (active != 'packages' && pos >= '3332' && pos <= '3860') {
        removeActive();
        active = 'packages';
        $('#m-packages a').addClass('active');
    } else if (active != 'signup' && pos >= '4444' && pos <= '4966') {
        removeActive();
        active = 'signup';
        $('#m-signup a').addClass('active');
    } else if (active != 'contact' && pos >= '5556') {
        removeActive();
        active = 'contact';
        $('#m-contact a').addClass('active');
    } else if (active != '') {
        active = '';
    }
    $('#divd').text(pos);
});

您还可以简化小事：

var active = '';
var prevActive = '';

$(window).scroll(function () {
    var pos = $(window).scrollTop();
    if (pos <= 521) {
        active = 'intro';
    } else if (pos <= 1107) {
        active = '';
    } else if (pos <= 1626) {
        active = 'nosales';
    } else if (pos <= 2219) {
        active = '';
    } else if (pos <= 2742) {
        active = 'crates';
    } else if (pos <= 3331) {
        active = '';
    } else if (pos <= 3860) {
        active = 'packages';
    } else if (pos <= 4443) {
        active = '';
    } else if (pos <= 4966) {
        active = 'signup';
    } else if (pos <= 5555) {
        active = '';
    } else {
        active = 'contact';
    }

    if(active != prevActive) {
        $('#vtop ul li > a').removeClass('active');
        if(active != '') {
            $('#m-'+active+' a').addClass('active');
        }
        prevActive = active;
    }

    $('#divd').text(pos);
});

我一起攻击了一个类似的例子。它没有相同的html结构，但它显示了滚动行为：

http://jsfiddle.net/z7YHX/

Answer 4

它的代码很好，但我认为有一种更易于编写代码的方法 - 使用对象文字 - 这也会导致更小的下载。

var bands = {
    intro: [0,521], 
    nosales:[1108,1626], 
    crates:[2220,2742], 
    packages:[3332,3860],
    signup: [4444, 4966],
    contact: [5556, 99999]};

var win = $(window); //Cache for speed

win.scroll(function () {
    var pos = win.scrollTop();

    for (var key in bands) {
        var band = bands[key];
        if (pos >= band[0] && pos <= band[1]) {
            $('#vtop ul li > a').removeClass('active');
            $('#m-' + key + ' a').addClass('active');
            break;
        }
    }
});

使用if else语句进行Jquery性能

4 个答案: