javascript - 使用 addClass/delay/removeClass 的 "right"方法是什么？

Question

我有一个简单的任务，当我点击一个链接时，我想将 bg-success 类添加到它的子类中，延迟 800 毫秒然后删除该类。

我可以在点击链接后触发 addClass()，就像这样，它有效:

$('a').on('click', function() {
    $(this).find('span.code').addClass('bg-success');
});

我也可以在点击后触发 removeClass，它也可以(单独)工作:

$('a').on('click', function() {
    $(this).find('span.code').removeClass('test-class');
});

我可以让它延迟，在addClass之后，让它淡出，它起作用了:

$('a').on('click', function() {
    $(this).find('span.code').addClass('bg-success').delay(800).fadeOut(400);
});

但是当我想添加类，延迟，然后删除类时，它不起作用，它保持不变并且什么都不做。我什至尝试了 8000 毫秒这样的长时间，但仍然无法正常工作。如果我用2个addClass()替换它，它会同时添加2个类，并且不关心delay():

$('a').on('click', function() {
    $(this).find('span.code').addClass('bg-success').delay(8000).removeClass('bg-success');
});

我已经用我在 Stackoverflow 上找到的所有东西进行了测试。奇怪的是，当我使用 fadeIn、fadeOut 和其他所有东西时，它确实会延迟。当同时使用 addClass/removeClass 时，delay() 将被忽略。

谁有这样的问题，请提出一些想法。谢谢。

---

更新:

阅读评论，你们会看到答案就在这里。

顺便说一句，任何对 jQuery 有深入了解的人都可以为我解释一下，他们为什么决定这样做吗？我的意思是我看到这样做很容易，addClass 然后 delay 然后 removeClass，让 jQuery 开发团队决定让它不能这样工作的真正原因是什么？

我想知道，因为如果我有理由，我不会再踏入这样的陷阱。

Answer 1

如果你想使用.delay() 那么你需要使用 .queue() 指定延迟后将在元素上执行的函数队列。

您的代码应该是:

$('a').on('click', function() {
  $(this).find('span.code').addClass('bg-success').delay(800).queue(function() {
    $(this).removeClass('bg-success');
    $(this).dequeue();
  });
});

这是一个演示片段:

    $('a').on('click', function() {
      $(this).addClass('bg-success').delay(800).queue(function() {
        $(this).removeClass('bg-success');
        $(this).dequeue();
      });
    });

a {
  width: 100px;
  height: 100px;
  background-color: blue;
  cursor: pointer;
}
.bg-success {
  background-color: red;
}

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


<a>A link</a>

但是你也可以用setTiemout()来模拟这个效果:

$('a').on('click', function() {
  var myLink = $(this).find('span.code');
  myLink.addClass('bg-success');

  setTimeout(function() {
    myLink.removeClass('bg-success');
  }, 800);
});

delay() 限制:

要进一步了解为什么 delay() 最好只与效果一起使用，您可以在 jquery documentation 中查看不幸的是，它对原生 JavaScript setTimeout 函数有一些限制:

The .delay() method is best for delaying between queued jQuery effects. Because it is limited. It doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.