Question

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

点击链接后我可以触发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之后，让fadeOut，它可以工作：

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

但是当我想addClass，延迟，然后removeClass，它不起作用，它保持不变，什么都不做。我甚至尝试了很长时间，如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然后延迟然后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();
  });
});

这是一个DEMO代码段：

    $('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功能有一些限制：

.delay()方法最适合延迟排队的jQuery效果。因为它是有限的。例如，它没有提供取消延迟的方法 - .delay()不能替代JavaScript的本机setTimeout函数，这可能更适合某些用例。

Answer 2

来自文档：

.delay（）方法最适合延迟排队的jQuery效果。因为它是有限的 - 例如，它没有提供取消延迟的方法 - .delay（）不能替代JavaScript的本机setTimeout函数，这可能更适合某些用例。

（https://api.jquery.com/delay/）

我建议像这样使用setTimeout：

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

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

Answer 3

您可以随时尝试使用setTimeout()函数的普通旧JS，等待一段时间再做其他事情：

$('a').on('click', function() {
    var myCode = $(this).find('span.code').addClass('bg-success');
    setTimeout(function(){
       myCode.removeClass('bg-success');
    }, 800);
});

使用addClass / delay / removeClass的“正确”方法是什么？

3 个答案: