Question

我有一个按钮，点击后在500毫秒显示一个div，然后在500毫秒后将类震动添加到该div上。然后用delay在2秒后移除该震动。我想要的是如果用户按下按钮然后所有回调都被取消，除了最后一个。

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

$("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>

我使用clearQueue的解决方案：

$("button").click(function() {
  $(".content").show({
    duration: 500,
    done: function() {
      $(".content").clearQueue();
      $(".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>

但是这种方法永远不会允许添加shake类。因为clearQueue之后提到的队列也被清除了。

如何阻止clearQueue（）清除将来的队列？为什么clearQueue()表现得这样？它如何知道将来会添加queue？

Answer 1

提供.delay()和.queue()来电的名称。在设置.content之前，请检查.queue(queueName) .length是否有.delay(time, queueName)。将.dequeue(queueName)链.queue(queueName)调用，而不是在.dequeue()函数内调用.queue()。请注意，.delay()还向元素.queue()数组

添加了一个函数

＆＃13;

$("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");
    }
  })
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

正如评论中所提到的，可能有更好的选择来实现您想要的效果。听起来你在最后一次按下按钮后试图让shake类保持启用X秒。

我们可以使用setTimeout()完成此操作，setTimeout()在指定的时间后执行一个函数。在这个原因中，我们的.shake回调函数会在time秒后删除.shake类。

要在点击按钮时启用setTimeout课程，我们只需要重置＆＃39; 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) } }) });秒。

＆＃13;

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

＆＃13;

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

＆＃13;

//*[local-name()='div' And @guielement='DAY_AREA_THIS_MONTH_WORKING_DAY']

＆＃13;

如何阻止clearQueue（）清除以后的队列？

2 个答案: