Как предотвратить несколько кликов, запускающих несколько анимаций

Question

Мне было интересно, как предотвратить множественные клики или одно событие запускается несколько раз из-за этих нескольких кликов.

Предположим, что мне нужно анимировать объект. Одна кнопка вызывает анимацию, другая кнопка сбросит анимацию.

<div class="div"> 
    Animate Me! 
</div> 
<div class="nav"> 
    <div class="start">start</div> 
    <div class="reset">reset</div> 
</div> 

Мне все равно, сколько раз пользователь нажимал кнопку «звезда», анимация должна запускаться только один раз. Это не значит, что в будущем анимация не может быть запущена больше. Когда анимация сбрасывается, ее можно запустить еще раз, и так далее.

$('.start').click(function(){ 
    $('.div').animate({ 
     left: '+=' + 100}); 
}); 

$('.reset').click(function(){ 
    $('.div').animate({ 
     left: 50}); 
}); 

Вот пример того, что я готов сделать: fiddle

Попробуйте нажать столько, сколько вы можете на кнопку «старт» и анимация будет срабатывать в соответствии с количеством кликов ,

Я посмотрел в Интернете, и я узнал, что существует два способа предотвращения нескольких кликов. Однако кажется, что они не работают со мной.

1) использовать .unbind() found here:

$('.reset').unbind().click(function(){ 
    $('.div').animate({ 
     left: 50}); 
}); 

, но он не работает: fiddle;

2) использовать event.stopImmediatePropagation found here:

$('.reset').click(function(event){ 
event.stopImmediatePropagation() 
    $('.div').animate({ 
     left: 50}); 
}); 

не работает ни. fiddle;

Как я могу предотвратить, что кнопка «запуска» запускает многократно анимацию? но щелкнуть, когда нажата кнопка «Сброс»?

Answer 1

Вы можете добавить помощи класса в кнопки запуска и удалить его, если сброс кнопка нажата.

$('.start').click(function() { 
    if(!$(this).hasClass('move')){ 
     $(this).addClass('move'); 
     $('.div').animate({ 
      left: '+=' + 100 
     }); 
    } 
}); 

$('.reset').click(function() { 
    $('.start').removeClass('move'); 
    $('.div').animate({ 
     left: 50 
    }); 
}); 

Fiddle

Лучше:

$('.nav').on('click', '.start:not(.move)', function() { 
    $(this).addClass('move'); 
    $('.div').animate({ 
     left: '+=' + 100 
    }); 
}); 

$('.reset').click(function() { 
    $('.start').removeClass('move'); 
    $('.div').animate({ 
     left: 50 
    }); 
}); 

Fiddle

Answer 2

Использование jquery one метод http://api.jquery.com/one/.

$('.start').click(function(){ 
 
var div = $('.div:not(.animated)'); 
 
div.animate({ 
 
     left: '+=' + 100}).addClass('animated'); 
 
}); 
 

 
$('.reset').click(function(event){ 
 
var animated = $('.div.animated'); 
 
animated.animate({ 
 
     left: 50}).removeClass('animated'); 
 
});

.div { 
 
    position: absolute; 
 
    top: 150px; 
 
    left: 50px; 
 
    height: 100; 
 
    width: 100; 
 
    background-color: blue; 
 
} 
 

 
.start, .reset { 
 
    display: table-cell; 
 
    width:50%; 
 
} 
 

 
.start { 
 
    background-color:green; 
 
} 
 

 
.reset{ 
 
    background-color:red; 
 
} 
 

 
} 
 
.nav { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    height: 60px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="div"> 
 
    Animate Me! 
 
</div> 
 
<div class="nav"> 
 
    <div class="start">start</div> 
 
    <div class="reset">reset</div> 
 
</div>

Answer 3

Использование JQuery-х .one()

$('.start').one('click', function() { 
 
    $('.div').animate({ left: '+=' + 100 }); 
 
    $('.reset').click(function() { 
 
     $('.start').off('click'); 
 
     $('.div').animate({ left: 50 }); 
 
     $('.start').one('click', function() { 
 
      $('.div').animate({ left: '+=' + 100 }); 
 
     }); 
 
    }); 
 
});

.div { 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div">Animate Me!</div> 
 
<div class="nav"> 
 
    <div class="start">start</div> 
 
    <div class="reset">reset</div> 
 
</div>