Limit ‚Mausrad‘ Delta Feuer einmal pro Scroll

Question

ich den folgenden Code unten bin mit zwei divs in verschiedenen Richtungen zu bewegen(), aber ich bin neugierig, zu wissen, ob Sie die Scroll begrenzen können, so dass es nur einmal pro feuert Spirale (anstatt es ständig Scrollen und Senden meine Funktionen in eine Endlosschleife

$('.page-left, .page-right').bind('mousewheel', function(event, delta) { 
    var windowHeight = $(window).height(); 
    if (delta < 0) { 
     prevProject(); 
    } 
    if (delta > 0) { 
     nextProject(); 
    } 
}); 

Sie können sehen, wo ich bin oben bis zu hier:. http://dev.rdck.co/lyonandlyon/

Vielen Dank im Voraus, R

Animationsfunktionen als Referenz:

var prevProject = function() { // up arrow/scroll up 
    var windowHeight = $(window).height(); 

    $('.page-left .page-left-wrapper').css({bottom:'auto'}); 
    $('.page-left .page-left-wrapper').animate({top:0},800, function() { 
     $('.page-left .page-left-wrapper').prepend($('.page-left .project-left:last-of-type')); 
     $('.page-left .page-left-wrapper').css({top:-windowHeight}); 
    }); 
    $('.page-right .page-right-wrapper').css({top:'auto'}); 
    $('.page-right .page-right-wrapper').animate({bottom:+windowHeight*2},800, function() { 
     $('.page-right .page-right-wrapper').append($('.page-right .project-right:first-of-type')); 
     $('.page-right .page-right-wrapper').css({bottom:+windowHeight}); 
    }); 
}; 


var nextProject = function() { // down arrow/scroll down 
    var windowHeight = $(window).height(); 

    $('.page-left .page-left-wrapper').animate({top:0},800, function() { 
     $('.page-left .page-left-wrapper').prepend($('.page-left .project-left:last-of-type')); 
     $('.page-left .page-left-wrapper').css({top:-windowHeight}); 
    }); 
    $('.page-right .page-right-wrapper').animate({bottom:+windowHeight*2},800, function() { 
     $('.page-right .page-right-wrapper').append($('.page-right .project-right:first-of-type')); 
     $('.page-right .page-right-wrapper').css({bottom:+windowHeight}); 
    }); 
}; 

Answer 1

Sie können nur innerhalb der Mausrad-Funktion für die Animation überprüfen (demo)

$('.page-left, .page-right').on('mousewheel', function(event, delta) { 
    if ($('.page-left-wrapper, .page-right-wrapper').is(':animated')) { 
     return false; 
    } 
    var windowHeight = $(window).height(); 
    if (delta < 0) { 
     prevProject(); 
    } 
    if (delta > 0) { 
     nextProject(); 
    } 
}); 

---

Update: wir debounce verwenden aufgelöst als die lange Scroll (Finger über ein Touchpad) musste gestoppt werden (updated demo).

$(document).keydown($.debounce(250, function(e) { 
    switch (e.which) { 
    case 38: // up arrow 
     prevProject(); 
     break; 
    case 40: // down arrow 
     nextProject(); 
     break; 
    } 
})); 

$('.page-left, .page-right').on('mousewheel', $.debounce(250, function(event, delta) { 
    var windowHeight = $(window).height(); 
    if (delta < 0) { 
     prevProject(); 
    } 
    if (delta > 0) { 
     nextProject(); 
    } 
})); 

Answer 2

Sie können dieses Problem mit einer Flagge umgehen. Sie können ein globales Flag isAnimating verwenden und es auf "true" setzen, wenn Sie gerade die Position der divs Ihrer Website animieren.

So kann der Code wie folgt aussehen:

var isAnimating = false; 

$('.page-left, .page-right').bind('mousewheel', function(event, delta) { 
    // if the div will be animated at this moment return 
    if(isAnimating) { 
     return; 
    } 

    var windowHeight = $(window).height(); 
    if (delta < 0) { 
     prevProject(); 
    } 
    if (delta > 0) { 
     nextProject(); 
    } 
}); 

var prevProject = function() { 
    isAnimating = true; 

    var oneIsDone = false, 
     finish = function() { 
      // if both animations are done, set the flag to false 
      if(oneIsDone) { 
       isAnimating = false; 
      } 
      // at least one is done... 
      oneIsDone = true; 
     }; 

    // animate the previous project and set the flag to false (in the callback) 
    $('.page-left .page-left-wrapper').css({bottom:'auto'}); 
    $('.page-left .page-left-wrapper').animate({top:0},800, function() { 
     $('.page-left .page-left-wrapper').prepend($('.page-left .project-left:last-of-type')); 
     $('.page-left .page-left-wrapper').css({top:-windowHeight}); 
     finish(); 
    }); 
    $('.page-right .page-right-wrapper').css({top:'auto'}); 
    $('.page-right .page-right-wrapper').animate({bottom:+windowHeight*2},800, function() { 
     $('.page-right .page-right-wrapper').append($('.page-right .project-right:first-of-type')); 
     $('.page-right .page-right-wrapper').css({bottom:+windowHeight}); 
     finish(); 
    }); 
}; 

var nextProject = function() { 
    // the same as in the prevProject function, but only in the other direction 
}; 

Answer 3

Ich schlage vor, extremums zu erkennen die Funktion Feuer:

var mw1 = 0; 
var mw2 = 0; 
var lock; 
$(document).bind('mousewheel', function(evt) { 
    var delta = evt.originalEvent.deltaY 
    if(((delta > 0 && delta < mw2 && mw2 > mw1) || (delta < 0 && delta > mw2 && mw2 < mw1)) && !lock){ 
     console.log(mw1 + " " + mw2 + " " + delta) 
     // call some function here 
     lock = true; 
     window.setTimeout(function(){ 
      lock = false; 
     },200) 
    } 
    mw1 = mw2; 
    mw2 = delta; 
}) 

Schloss ist, sollte eigentlich nicht notwendig sein, aber extremums sind manchmal mehr als einmal pro blättern aus irgendeinem Grund gefunden.