使用jquery多次单击时禁用单击按钮

Question

我有一个触发第一次点击和第二次点击的按钮点击。所以当点击多次动画就崩溃了。

有没有办法在动画期间禁用点击并仅在动画完成时启用？

请参阅下面我的代码，其中 prop 已禁用，但无法正常工作

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;

    }; 
});

这是标记

<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"
  }
}

这不会禁用您的按钮，但我认为它会帮助您防止动画中断。