JQuery - アニメーションが完了するまでスクロールホイールを無効にする

Question

mousewheelイベントでマウスホイールを無効にしようとしていますが、アクションが完了した後にのみ有効にしています。

$(window).on('DOMMouseScroll mousewheel', function (event) { 

    //disable mousewhell until the following animation is complete 

    $('.box').animate({ 
     margin: div_offset+'px 0 0 0' 
    }, 500); 

    //enable mousewhell 

    return false; 
}); 

私はまた、アニメーションが完了するまで、最初の1の後に、すべてのスクロールを無視するようにコードをしたいと思います。この特殊なケースでは、ユーザーがマウスホイールで複数の目盛りをスクロールしても、アニメーションが1回だけ完了します。この場合、基本的にはマウスのスクロールを「ティック」した後、500ミリ秒間マウスホイールを無効にし、残りの「ティック」を登録しないようにします（ユーザが500ミリ秒間に10ティックスクロールすると、 1つのアニメーション、残りは無視されます）。 500ミリ秒後、再びマウスホイールを有効にします。

事前におねがいします。

Answer 1

私はもともとこの質問を重複しておきましたが、質問の半分にしか答えないと言われました。アニメーションが完了するまで、イベントを再処理しないための提案された解決策を追加するために再オープンします。 this SO post

で提案されているようにあなたはこれと似たような行うことができるはずcompleteをアニメーション使用

：あなたは何ができるか

var animating = false; 

$(window).on('DOMMouseScroll mousewheel', function (event) { 
    if(animating){ 
     return false; 
    } 

    animating = true; 

    $('.box').animate({ 
     margin: div_offset+'px 0 0 0' 
    }, 500, function(){ 
     animating = false; 
    }); 
}); 

Answer 2

は、DOMイベントに機能を割り当て、その後、空を割り当てることですそのコードの最初の行には機能しません。その後、アニメーションが完了したら、関数をDOMイベントに再割り当てします。そのよう ：

function test(event) { 
    $(window).off('DOMMouseScroll mousewheel'); 
    //perform your scroll event 
    $('.box').animate({ 
     margin: div_offset+'px 0 0 0' 
    }, 500); 
    sleep(500); 
    $(window).on('DOMMouseScroll mousewheel',test); 
} 
$(window).on('DOMMouseScroll mousewheel',test); 

これは、トリックを行いますが、それは忙しいあなたのJSのスレッドを開催します、あなたも行うことができます：

function test(event) { 
     $(window).off('DOMMouseScroll mousewheel'); 
     //perform your scroll event 
     $('.box').animate({ 
      margin: div_offset+'px 0 0 0' 
     }, 500); 
     setTimeout(500,function() {$(window).on('DOMMouseScroll mousewheel',test(event));}); 

    } 
    $(window).on('DOMMouseScroll mousewheel',test); 

とのFransの回答に基づいて：

function test(event) { 
      $(window).off('DOMMouseScroll mousewheel'); 
      //perform your scroll event 
      $('.box').animate({ 
       margin: div_offset+'px 0 0 0' 
      }, 500,function() {$(window).on('DOMMouseScroll mousewheel',test);}); 

     } 
    $(window).on('DOMMouseScroll mousewheel',test);