jQuery: элемент «body» активирует событие прокрутки дважды

Question

Я внедрил анимацию для своего фотолога. У меня все еще есть большая проблема, потому что элемент «body» активирует анимацию дважды.

Я думаю, что проблема связана с $ ('body'). Aimate. Поскольку я думаю, что когда тело оживляет, событие прокрутки будет активировано снова и, таким образом, вызовет событие дважды.

Проблема с моим кодом - прокрутка страницы вверх. Когда я просматриваю страницу вверх. ScrollAnimatePrev будет запускаться, а затем элемент $ ('body') будет анимироваться. После анимации для анимационной переменной установлено значение false. Но элемент $ ('body') запускает событие прокрутки, потому что я думаю, когда я устанавливаю scrollTop, запускается событие прокрутки. Итак, еще раз currentPos установлен в $ (window) .scrollTop(), тогда currentPos> previousPos возвращает true, и! Animating возвращает true, чтобы он запускал scrollAnimate.

Теперь я хочу исправить это. Как?

$(function() { 
     var record = 0; 
     var imgHeight = $(".images").height(); 
     var offset = $(".images").eq(0).offset(); 
     var offsetHeight = offset.top; 
     var previousPos = $(window).scrollTop(); 
     var animating = false; 
     var state = 0; 
     $(window).scroll(function() { 
      var currentPos = $(window).scrollTop(); 
      console.log(currentPos); 
      if(currentPos > previousPos && !animating) { 
       record++; 
       scrollAnimate(record, imgHeight, offsetHeight); 
       animating = true; 
      } else if (currentPos < previousPos && !animating) { 
       record-- 
       scrollAnimatePrev(record, imgHeight, offsetHeight); 
       animating = true; 
      } 
      previousPos = currentPos; 
      console.log(previousPos) 
     }) 


     function scrollAnimate(record, imgHeight, offsetHeight) { 
      $('body').animate(
       {scrollTop: (parseInt(offsetHeight) * (record+1)) + (parseInt(imgHeight) * record)}, 
       1000, 
       "easeInOutQuart"      
      ) 
      .animate(
       {scrollTop: (parseInt(offsetHeight) * (record)) + (parseInt(imgHeight) * (record))}, 
       1000, 
       "easeOutBounce", 
       function() { 
        animating = false; 
       } 
      ) 
     } 

     function scrollAnimatePrev(record, imgHeight, offsetHeight) { 
      $('body').animate(
       {scrollTop: ((parseInt(imgHeight) * record) + (parseInt(offsetHeight) * record)) - offsetHeight}, 
       1000, 
       "easeInOutQuart" 
      ) 
      .animate(
       {scrollTop: ((parseInt(imgHeight) * record) + (parseInt(offsetHeight) * record))}, 
       1000, 
       "easeOutBounce", 
       function() { 
        animating = false; 
       } 
      ) 
     } 
    }) 

Answer 1

Я думаю, что это могло бы выстрелить дважды. Недавно у меня была аналогичная проблема.

У меня было что-то похож на

$('#id, #id2').animate({width: '200px'}, 100, function() { doSomethingOnceOnly(); }) 

Он звонит мой doSomethingOnceOnly() дважды, и я подумал, что это должно быть, были двойные селекторы в $ аргументу. Я просто сделал это 2 разных селектора, и он работал нормально. Так вот так

$('#id').animate({width: '200px'}, 100); 
$('#id2').animate({width: '200px'}, 100, function() { doSomethingOnceOnly();); 

Answer 2

Использование флага для управления триггером сделало трюк для меня.

var targetOffset = 0; 
var allow_trigger = true; 
$('html,body').animate({scrollTop: targetOffset}, 'slow', function() { 
    if (allow_trigger) { 
     allow_trigger = false; 
     doSomethingOnlyOnce(); 
    } 
});