スクロールごとに1回ずつ呼び出す「mousewheel」デルタを制限する

Question

以下のコードを使用して異なるdiv（）のスクロールを行っていますが、スクロールを制限して1回だけ発生させることができるかどうか不思議ですスクロール（むしろそれが継続的にスクロールすると無限ループに私の機能を送信するよりも

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

あなたは私がここまでアップだ場所を確認することができ

：事前にhttp://dev.rdck.co/lyonandlyon/

おかげで、 R

リファレンスのアニメーション機能：

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

あなただけのマウスホイール機能の中にアニメーションのために（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(); 
    } 
}); 

---

アップデートを確認することができます：

ように、コードは次のようなものを見ることができ、我々はデバウンスを使用することを決議しました長いスクロール（指をタッチパッドの下にスライドさせる）を停止する必要がありました（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

この問題を回避するには、フラグを使用します。現在グローバルフラグisAnimatingを使用して、ウェブサイトのdivの位置をアニメートしている場合はtrueに設定することができます。

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

私は機能を発射する極値を検出することをお勧め：

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; 
}) 

ロックは実際には必要ではないはずですが、極値は時々、何らかの理由で一度スクロールあたりより多くのを発見しています。