Повторное добавление / удаление класса будет замедлять ход событий? - PullRequest
Новая
       11

Повторное добавление / удаление класса будет замедлять ход событий?

1 голос
/ 02 апреля 2011

Итак, я хочу сделать пару вещей по прокрутке с помощью jQuery ... 

$(window).scroll(function() {
  //so it's not overly aggressive calling the funciton
  setTimeout(function(){check_scroll()}, 50);
});

А потом ... 

function check_scroll(){
  var scroll = $(window).scrollTop()
  if(scroll > 100) {
    $("#fixed").addClass("fixed");
  }
  else
    $("#fixed").removeClass("fixed");  
};

Итак, мой вопрос, #fixedбудет ли класс ".fixed" большую часть времени, поэтому, если я неоднократно прошу jQuery добавить его, будет ли он неэффективным?Должен ли я сначала проверить, есть ли у него класс, а затем попытаться добавить его?

Кажется, что все в порядке, как сейчас, но мое приложение будет расти и будет происходить много js, поэтому я хочумолоко каждый бит производительности возможно.

Ответы [ 3 ]

3 голосов
/ 02 апреля 2011

Если вы действительно беспокоитесь о производительности, $ ('# fixed') будет вызывать большее беспокойство. Вы должны поместить результат этого в переменную, если #fixed не будет отличаться каждый раз, когда вы запрашиваете его.

Вопрос о добавлении и удалении класса в основном "зависит". Что на самом деле делает добавление и удаление класса? Меняет ли это макет страницы или вы используете его как флаг для чего-то еще? Если это меняет макет страницы, и тогда у вас нет выбора. Если этого не произойдет, вы можете вместо этого использовать метод .data для сохранения состояния, что позволит избежать reflow (основная проблема производительности с добавлением / удалением классов).

Меня также беспокоит, сколько раз ваша функция check_scroll будет вызываться на практике. Вы не отменяете предыдущие события setTimout и, таким образом, вы получите кучу вызовов setTimeout. Вероятно, вы хотите что-то еще как: 

(function() {
  var timeout = null, fixed = $('#fixed'), win=$(window),
   check_scroll = function() {
      var scroll = win.scrollTop();
      fixed.toggleClass("fixed", scroll > 100);
      timeout=null;
   }
   win.scroll(function() {
      if (timeout) {
         // only do once every 50ms
         return;
      }
      timeout = setTimeout(check_scroll, 50);
   });
3 голосов
/ 02 апреля 2011

Не думаю, что вы вызовете снижение производительности при вызове addClass с классом, который уже существует для элемента.

Вы можете использовать этот блок кода, и он должен работать хорошо, поскольку toggleClass сначала использует hasClassперед вызовом addClass или removeClass: 

$("#fixed").toggleClass("fixed", scroll > 100);
0 голосов
/ 02 апреля 2011

Этот код должен быть в порядке,

Файл jquery загружается в браузер только один раз, и после загрузки он полностью готов к работе. Браузеру не нужно перезагружать его каждый раз, когда он вызывает файл для выполнения команды.

Ваш код должен быть в порядке, на мой взгляд.

...