jquery-避免双击

Question

我有一个简单的动画，问题是我希望动画在再次单击之前结束？

$(".next").click(function() {

 $('#result').animate({
    left: '-=250',
   }, 1000, function() {
  pos = $('#result').position();

  if (pos.left <= -550) {
$('.next').hide();
  }
  if (pos.left <= -250) {
    $('.prev').show();
  }
});

Answer 1

答案很简单，使用 .data() 方法在项目上设置可点击标志。您可以在完整的函数中重新启用它。

来自 jQuery.com:.data() Documentation

The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

We can set several distinct values for a single element and retrieve them later:

在动画上使用 complete 方法(您已使用该方法来显示/隐藏下一个/上一个按钮，我们可以重新启用要单击的按钮。

请注意，我们将 $(this) 存储到 btn 中，以便可以从 complete 函数的闭包中访问它。

$(".next").click(function() {
  var btn = $(this);
  if (btn.data('running'))
    return;

  btn.data('running', true);

  $('#result').animate({
    left: '-=250',
    }, 1000, function() {
       pos = $('#result').position();

       if (pos.left <= -550) {
         $('.next').hide();
       }
       if (pos.left <= -250) {
         $('.prev').show();
       }

       // Unset it here, this lets the button be clickable again
       btn.data('running', false);
    }
   );
});