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

我有一个按钮，单击后会在500ms内显示一个div，然后在500ms之后将类震动添加到该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？

最佳答案

为.delay()和.queue()调用提供一个名称。在设置.content之前，请检查.queue(queueName) .length是否具有.delay(time, queueName)。将.dequeue(queueName)链接到.queue(queueName)调用，而不是在.dequeue()函数中调用.queue()。请注意，.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>

关于javascript - 如何阻止clearQueue()清除将来的队列？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44075067/