jqueryで複数回クリックするとボタンをクリックしないようにします

Question

ボタンをクリックして、最初のクリックと2回目のクリックをトリガーします。だから、複数回クリックすると、アニメーションが壊れてしまいます。

アニメーション中にクリックを無効にし、アニメーションが完了したときにのみ有効にする方法はありますか？小道具と

私のコードは、以下を参照してくださいここでは、適切

jQuery('.start_button').click(function(event){ 
    jQuery(this).find('button').prop('disabled', true); 
    if(clickcount === 0){ 
     jQuery(this).find('button').prop('disabled', true); 
     wheelForuneAnim.startAnimation(); 
     jQuery(this).find('button').prop('disabled', false); 
     clickcount = 1; 
    } 
    else if(clickcount === 1){ 
     jQuery(this).find('button').prop('disabled', true); 
     wheelForuneAnim.stopFull(); 
     setTimeout(function(){ 
      wheelForuneAnim.stopAnimation(); 
     }, 700); 
     clickcount = 0; 

    }; 
}); 

作業されていないdisbledマークアップ

<div class="start_button"> 
     <button type="button"></button> 
</div> 

方法

startAnimation = function() { 
     interval = setInterval(this.animation, 250); 
    }; 
animation = function() { 
     if((wheelelement % elems.length)==0){ wheelelement = 0 ;} 
     elems.removeClass('active_wheel'); 
     jQuery('.game_wheel_item:eq('+wheelelement+')').addClass('active_wheel'); 
     wheelelement++; 
    }; 

この問題を解決するためにどのように任意のアイデアですか？

Answer 1

コードの下に、コードの多くはあなたの問題を解決することを不要

jQuery('.start_button').on('click','button',function(event){ 
    jQuery(this).off('click','button'); 

     wheelForuneAnim.startAnimation(function() 
     { 
      // do your second if stuff 
      setTimeout(function(){ 
       wheelForuneAnim.stopAnimation(function() 
       { 
         // after function finished executing do some stuff here 
       }); 
       jQuery(this).on('click','button'); 
      }, 700); 
     }); 
}); 

あなたの方法

startAnimation = function (cbck) { 
     interval = setInterval(this.animation, 250); 
     if(cbck) 
     { 
      cbck(); 
     } 
    }; 
stopanimation = function (cbck) { 
     if((wheelelement % elems.length)==0){ wheelelement = 0 ;} 
     elems.removeClass('active_wheel'); 
     jQuery('.game_wheel_item:eq('+wheelelement+')').addClass('active_wheel'); 
     wheelelement++; 

     if(cbck) 
      cbck(); 
    }; 

Answer 2

あなたは常にこのようにそれをやろうとすることができる。

jQuery('.start_button button').click(function(event) { //This gets the button in the div 

    var button = jQuery(this); 

    if (buttonText(button.text()) === "Start") { 
    wheelForuneAnim.startAnimation(); 
    button.text('Stop') 
    } else { 
    wheelForuneAnim.stopFull(); 
    setTimeout(function() { 
     wheelForuneAnim.stopAnimation(); 
     button.text('Start') 
    }, 700); 
    } 
}) 

function buttonText(text) { 
    if (text === "Start") { 
    return "Start" 
    } else { 
    return "Stop" 
    } 
} 

このボタンを無効にすることはありませんが、アニメーションが壊れるのを防ぐのに役立つと思います。