Предотвратите многократные задержки на щелчке идентификатора - PullRequest
0 голосов
/ 02 ноября 2018

У меня есть этот код:

$(element).on('click', function() {
    $this.closest('div').before('<span id="message" style="display:none"></span>');
    $('#message').fadeIn().delay(5000).fadeOut();

Где, как вы видите, по щелчку на указанном элементе я собираюсь исчезнуть в сообщении span # перед div, подождать 5 секунд, а затем исчезнуть span.

Я пытался добавить stop () перед исчезновением, но это помогает только предотвратить мульти-анимацию при нажатии, мне нужен способ предотвращения мульти-задержек при нажатии, потому что пользователь, когда пытается щелкнуть указанный элемент, интервал будет исчезать каждые 5 секунд как количество кликов на указанном элементе.

Скрипка: https://jsfiddle.net/43z78dk6/

1 Ответ

0 голосов
/ 02 ноября 2018

http://api.jquery.com/stop/

Если вы передадите значение true в stop(), оно будет перепрыгивать через любые анимации в очереди, и они будут игнорироваться.

var $element = $('button');

$element.closest('div').before('<span id="elementFade" style="display:none">You clicked him!</span>');

$element.on('click', function() {
                   //pass in true to end all queued animations
                   //you can click all you want
  $('#elementFade').stop(true).fadeIn().delay(5000).fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button>You know you want to click me</button>
</div>
...