javascript - 为什么我的队列可以正常工作而不会出列？

Question

我已经阅读了很多次 jquery 文档，但无法理解出队方法。考虑以下示例:

var div = $(".div");



div.animate({
  height: "200px"
}, 3000).queue(function(){
  console.log("3 seconds passed and I show off without dequeue");  
});

div {
  width: 300px;
  height: 100px;
  background-color: red;
}

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

当您运行此脚本时，您会看到 queue 内的函数在 3 秒后触发，但我尚未将其出列。 jQuery 表示 dequeue 将函数从队列中取出，然后执行它。但如果函数可以在不出队的情况下执行，那么出队有什么用呢？

Answer 1

.dequeue() 被调用来保持队列被执行，如果你有两个动画，如果你不使用它，第二个将不会被调用。根据您的代码检查下一个示例:第一个 div 有 .dequeue 注释，因此仅执行一个动画。

var divClass = $(".div");
divClass.animate({
  height: "50px"
}, 500).queue(function(){
 
  //$(this).dequeue();
}).animate({height: "100px"},500);

var div = $("div");
div.animate({
  height: "50px"
}, 500).queue(function(){
  
  $(this).dequeue();
}).animate({height: "100px"},500);

div {
  width: 300px;
  height: 100px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">First DIV</div>
<span>HELLO</span>
<div>Second DIV</div>