jQuery: Das 'body'-Element aktiviert das Scroll-Ereignis zweimal

Question

Ich habe eine Animation für meinen Foto-Blog implementiert. Ich habe immer noch ein großes Problem, weil das Element 'body' die Animation zweimal aktiviert.

Ich denke, das Problem stammt aus dem $ ('Körper'). Weil ich denke, dass wenn der Körper animiert wird, das Scroll-Ereignis erneut aktiviert wird und somit das Ereignis zweimal auslöst.

Das Problem meines Codes ist Scrollen der Seite nach oben. Wenn ich die Seite nach oben scrolle. Der scrollAnimatePrev wird ausgelöst und dann wird $ ('body') Element sich selbst animieren. Nach der Animation wird die animierende Variable auf "false" gesetzt. Aber das Element $ ('body') löst das Bildlaufereignis aus, weil ich denke, wenn ich scrollTop setze, wird das Bildlaufereignis ausgelöst. Also wird currentPos wieder auf $ (window) .scrollTop() gesetzt, dann gibt currentPos> previousPos true zurück und animating gibt true zurück, so dass scrollAnimate ausgelöst wird.

Jetzt möchte ich das beheben. Wie?

$(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

Ich denke, es könnte diesen Rückruf zweimal auslösen. Ich hatte kürzlich ein ähnliches Problem.

hatte ich etwas ähnlich zu

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

Es war mein Aufruf doSomethingOnceOnly() zweimal, und ich dachte, dass es die Dual-Selektoren im $ Argument gewesen sein muss. Ich habe es einfach 2 verschiedene Selektoren gemacht und es hat gut funktioniert. So wie das

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

Answer 2

Mit einer Flagge, um den Auslöser zu steuern, hat der Trick für mich.

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