Как запретить добавление анимации в очередь во время действия анимации?

Есть скрипт на JQuery и jquery.mousewheel, который при скролле мышкой пролистывает страницу до следующего или предыдущего блока. Сначала циклом вешается обработчик на каждый блок.
var currentBlock = 1;
for (i=1; i<8; i++){                                                  //цикл вешает обработчики
      $("#block" + i).mousewheel(function(event, delta) {     
      if (delta < 0)                                                             //если скролл вниз
         { 
          if(currentBlock < 7)  {currentBlock+=1;} else {return false;}    //если блок последний то ничего
          $('body').animate({
          scrollTop: $("#block" + currentBlock).offset().top}, 1500);             //пролистывает  страницу        
       }  else {                                                                //если скролл вверх
          if(currentBlock > 1)  {currentBlock-=1; } else {return false;}           //если блок первый то ничего
          $('body').animate({
          scrollTop: $("#block" + currentBlock).offset().top}, 1500);    
                }                 
          return false;                            
  });
  }                                                              //конец цикла

Пролистывание работает как нужно, но если во время действия анимации ещё раз прокрутить колёсико, то после окончания текущей, сразу начнётся следующая и страница будет пролистываться дальше. Как сделать так, чтобы до окончания текущей анимации, новая не добавлялась, или чтобы в конце каждой очередь очищалась?
  • Вопрос задан
  • 2560 просмотров
Решения вопроса 1
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
var currentBlock = 1,
      scrolled = false;
for (i=1; i<8; i++){                                                  //цикл вешает обработчики
      $("#block" + i).mousewheel(function(event, delta) {     
      if (delta < 0)                                                             //если скролл вниз
         { 
          if(currentBlock < 7)  {currentBlock+=1;} else {return false;}    //если блок последний то ничего
         if ( !scrolled ){
         scrolled = true;
          $('body').animate({
          scrollTop: $("#block" + currentBlock).offset().top}, 1500, function(){ scrolled = false;});             //пролистывает  страницу    
              
       }  else {                                                                //если скролл вверх
          if(currentBlock > 1)  {currentBlock-=1; } else {return false;}           //если блок первый то ничего
         if ( !scrolled ){
         scrolled = true;
          $('body').animate({
          scrollTop: $("#block" + currentBlock).offset().top}, 1500, function(){ scrolled = false;});    
                }  
}               
          return false;                            
  });
  }                                                              //конец цикла

Как то так, возможно скобками где то промазал. И проверить логику, мог с "!" начудить.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
masterklass
@masterklass
А если попробовать перед animate вызвать stop(true)?
$('body').stop(true).animate({
Ответ написан
Комментировать
deleted-tnorman
@deleted-tnorman
Есть такое понятие как Флаг. Это переменная, которая имеет булево значение
0 или 1
true или false

самым простым решением будет создать вне функции переменную, которая будет определяться изначально как false а потом как true и по ней будет ориентироваться проверка.

jsfiddle.net/f27nyzh6/1
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы