javascript - 如何优化此 Javascript 函数？

Question

我有一个程序，如果用户滚动到页面顶部附近或向下滚动，我的顶部导航具有不同的样式:

/* Handle the changing of the top nav on page scroll */
window.onscroll = function ()
{
    if ($(window).scrollTop() > 150) // 150 pixels from top triggers scrolling
    {
        $('.navbar-default').addClass('scrolling');
    }
    else
    {
        $('.navbar-default').removeClass('scrolling');
    }
};

问题是我意识到这是有效的，因为 navbar-default 的 class 被添加或删除的次数相对于onscroll 被调用。我还意识到我需要根据是否发生滚动来更改导航中的图像，所以我基本上会有

/* Handle the changing of the top nav on page scroll */
window.onscroll = function ()
{
    if ($(window).scrollTop() > 150) // 150 pixels from top triggers scrolling
    {
        $('.navbar-default').addClass('scrolling');
        $('.navbar-default .navvar-brand img').attr('src','image1.jpg');
    }
    else
    {
        $('.navbar-default').removeClass('scrolling');
        $('.navbar-default .navvar-brand img').attr('src','image2.jpg');
    }
};

这更可笑。我该如何熏蒸这个充满代码味的房间？

Answer 1

这里有一些建议:

• 将花括号与函数放在同一行，否则您可能会遇到自动分号插入的情况问题 - Example
• 改用 Sprite 图 - Tutorial
• 切换类

• 使用 css 更改图像之间的切换，而不是根据 nav-default

  的类更改 img 源

  // Something like this...
  .nav-default {
    background-image: url('spriteimage.jpg');
    background-repeat: no-repeat;
    height: // height of first image here;
    background-position: // position of first image here;
  }
  
  .nav-default.scrolling {
    height: // height of second image here;
    background-position: // position of second image here;
  }
  

更高级的可能性:

(我个人不知道这是否会提高性能，但您可以尝试一下)

• 以较小的时间间隔(100 毫秒)进行轮询以检查滚动条的位置，而不是在每次有人滚动时检查然后切换类
• 这会降低速度/响应速度，但会更加一致(最坏情况:每 100 毫秒切换一次类)