Как оптимизировать эту функцию 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'); 
    } 
}; 

Проблема в том, что я понимаю, что это эффективно, потому что class из navbar-default добавляется или удаляется небольшое количество раз по отношению к числу раз, которое вызывается 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
• Используйте спрайты для изображения вместо - Tutorial
• Переключить класс

• Используйте CSS, чтобы изменить переключение между изображениями вместо изменения источника Img на основе класса nav-default

  // 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 мс)