jQuery给scroll()和resize()增加延时处理

浏览器的scroll()和resize()方法都是实时处理的，比如浏览器拉动浏览器的过程中一直在触发scroll()，浏览器的在改变大小尺寸的时候一直在触发resize()，如果在这两个方法里加上函数之后，会一直不间断的去处理，很可能造成浏览器负荷。

解决的方法就是延时，当然还有其他方法。比如，原先的处理方法是：

$(window).scroll(function()
{
        alert();
});

拉动浏览器的过程中一直alert。

修改后：

var timer=0;
$(window).scroll(function()
{
        if(timer)
        {
                clearTimeout(timer);
                timer=0;
        }
        timer=setTimeout(function()
        {
                alert();
        },300);
});

或者：

var timer=0;
$(window).scroll(function()
{
        if(timer)
        {
                clearTimeout(timer);
                timer=0;
        }
        timer=setTimeout(scroll_fn,300);
});
scroll_fn=function()
{
        alert();
}

基础理论到此结束

实践模式

场景 ： 页面相同元素上下把整个网页分成5个部分，我们制作一个右侧的固定的导航
当鼠标滚动到相应的部分时，此处导航追加active，进行样式变更。

var timer = 0;      
$(window).scroll(function(){
    if(timer)
        {
                clearTimeout(timer);
                timer=0;
        }
    var timer = setTimeout(function(){
        var topI = $('.sec_pal').offset().top;
        var he1 = $('section:eq(1)').offset().top;
        var he2 = $('section:eq(2)').offset().top;
        var he3 = $('section:eq(3)').offset().top;
        var he4 = $('section:eq(4)').offset().top;
        $('.sec_pal ul li').removeClass('active');
        switch(topI>he1?(topI>he2?(topI>he3?(topI>he4?4:3):2):1):0){  //此处为程序关键点
            case 1:
                $('.sec_pal ul li:eq(1)').addClass('active');
                break;
            case 2:
                $('.sec_pal ul li:eq(2)').addClass('active');
                break;
            case 3:
                $('.sec_pal ul li:eq(3)').addClass('active');
                break;
            case 4:
                $('.sec_pal ul li:eq(4)').addClass('active');
                break;
            case 0:
                $('.sec_pal ul li:eq(0)').addClass('active');
                break;
        }   
    }, 2000);
   
   
});