如何阻止clearQueue()清除以后的队列？

Question

我有一个按钮,点击其中一个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>

我的解决方案是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

注意：此解决方案使用与clearQueue().

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

我们可以使用 来完成此操作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>