javascript - 如何阻止 clearQueue() 清除 future 的队列？

Question

我有一个按钮，点击它会在 500 毫秒内显示一个 div，然后在 500 毫秒后将 class shake 添加到该 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>

我的 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() 调用提供名称。在设置 .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>