切换类与点击延迟

Question

我有一个按钮，当单击它时，我希望它延迟切换另一个元素的类。所以逻辑是：

1. 点击按钮
2. 延迟 500 毫秒
3. 添加类
4. 再次点击相同的按钮
5. 延迟 500 毫秒
6. 删除类

这是我目前得到的：

jQuery(".menu-button").click(function(){
    jQuery(".nav-bar-logo").delay(500).queue(function() {
        jQuery(this).toggleClass("nav-bar-logo-active");
    });
});

我知道在处理延迟和addClass 和removeClass 时需要排队，但它似乎不适用于toggleClass

我得到的代码部分有效：类在初始点击延迟后切换，但再次点击时它什么也不做。

有人想解决这个问题吗？

Answer 1

正如 cmets 中所说，您正在寻找 .setTimeout()。根据您在下面的评论，您想切换.nav-bar-logo，您可以这样做：

jQuery('.menu-button').click(function() {
  window.setTimeout(function() {
    jQuery('.nav-bar-logo').toggleClass('nav-bar-logo-active');
  }, 500);
});

这里有一个小DEMO

jQuery('.menu-button').click(function() {
  window.setTimeout(function() {
    jQuery('.nav-bar-logo').toggleClass('nav-bar-logo-active');
  }, 500);
});

.nav-bar-logo {
  padding: 50px;
  background: red
}

.nav-bar-logo-active {
  background: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="menu-button">
  toggle button
</button>
<div class="nav-bar-logo">
  I'm going to change color when button toggled
</div>

Answer 2

this 不可用，因为它在延迟函数中，但我们可以访问点击事件：

jQuery(".menu-button").click(function(){
        window.setTimeout(function(){
                jQuery('.nav-bar-logo').toggleClass("nav-bar-logo-active");
            }, 500);
    });