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

Question

我有一个按钮，点击后会在 500 毫秒内显示一个 div，然后在 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() 不同的方法。

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

我们可以使用setTimeout() 来实现这一点，它会在指定的时间后执行一个函数。在这个原因中，我们将让我们的setTimeout() 回调函数在time 秒后删除.shake 类。

要在单击按钮时保持.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>

Answer 2

为.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>