如何阻止clearQueue（）清除

我有一个按钮，点击哪个div显示在500毫秒，然后在500毫秒之后，类别摇动被添加到该div。 然后在2秒后delay删除此摇动类别。 我想要的是，如果用户一直按住按钮，那么除最后一个以外，所有回调都会被取消。

如果按下多次按下有问题的代码：

$("button").click(function() {
  $(".content").show({
    duration: 500,
    done: function() {
      $(".content").addClass("shake");
      var time = parseFloat($(".content").css("transition-duration")) * 1000;
     
      $(".content").delay(time).queue(function() {
        console.log("shake");
        $(".content").removeClass("shake");
        $(".content").dequeue();
      });
    }
  })
});

div.content {
  border: 1px solid red;
  transition: background-color 2s ease-out;
  background-color: black;
  display: none;
}

div.content.shake {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="content">Content</div>

---

为.delay()和.queue()调用提供一个名称。 在设置.delay(time, queueName)之前检查.content .queue(queueName)是否有.length 。 链.dequeue(queueName)为.queue(queueName)调用，而不是在.queue()函数内调用.dequeue() 。 请注意.delay()也为元素.queue()数组添加了一个函数

$("button").click(function() {
  $(".content").show({
    duration: 500,
    done: function() {
      $(".content").clearQueue();
      $(".content").addClass("shake");
      var time = parseFloat($(".content").css("transition-duration")) * 1000;
      if (!$(".content").queue("shake").length)
      $(".content").delay(time, "shake").queue("shake", function() {
        console.log("shake");
        $(".content").removeClass("shake");
      }).dequeue("shake");
    }
  })
});

div.content {
  border: 1px solid red;
  transition: background-color 2s ease-out;
  background-color: black;
  display: none;
}

div.content.shake {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="content">Content</div>

---

注意：此解决方案使用与clearQueue()不同的方法。

正如评论中提到的那样，可能有更好的选择来达到你想要的效果。 这听起来像是在最后一次按钮按下后，您试图在X秒钟内保持shake类别。

我们可以用setTimeout()来完成这个工作，它会在指定的时间后执行一个函数。 在这项事业中，我们将有我们setTimeout()回调函数删除.shake下课time秒。

为了在点击按钮时保持.shake类，我们只需要'重置' setTimeout函数。 我们可以通过清除超时，使用clearTimeout ，然后重新创建它来做到这一点。 这是通过将setTimeout函数分配给一个变量来完成的，我们将其传递给clearTimeout以清除它，然后重新创建超时。

效果将是删除.shake类的函数将在最后一次单击该按钮之后运行time秒。

var remover;

$("button").click(function() {
  $(".content").show({
    duration: 500,
    done: function() {
      if (remover) {
          clearTimeout(remover);
      }
      
      $(".content").addClass("shake");
      var time = parseFloat($(".content").css("transition-duration")) * 1000;
 
      remover = window.setTimeout(function(){
        console.log("removing shake");
        $(".content").removeClass("shake");
      }, time)
    }
  })
});

div.content {
  border: 1px solid red;
  transition: background-color 2s ease-out;
  background-color: black;
  display: none;
}

div.content.shake {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="content">Content</div>

链接地址: http://www.djcxy.com/p/39619.html

上一篇: How to stop clearQueue() from clearing in

下一篇: Transactions issues with spring scheduler & spring batch item writer