什么是“;右“;使用addClass/delay/removeClass的方法

What is the "right" way to work with addClass/delay/removeClass?

本文关键字：delay removeClass 方法 使用 什么 addClass      更新时间：2023-09-26

我有一个简单的任务，当我点击一个链接时，我想将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);
});

但是，当我想添加Class、延迟，然后删除Class时，它不起作用，它保持不变，什么也不做。我甚至尝试了8000毫秒这样的长时间，但仍然无法实现。如果我用2个addClass（）替换它，它会同时添加2个类，并且不关心延迟（）：

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

我已经测试了Stackoverflow上的所有内容。奇怪的是，当我使用fadeIn、fadeOut和其他一切时，它确实会延迟。当同时使用addClass/removeClass时，delay（）将被忽略。

任何人有这样的问题，请提出一些想法。非常感谢。

更新：

阅读评论，你们会发现答案就在这里。

顺便说一句，对jQuery有深入了解的人能为我解释一下他们为什么决定这么做吗？我的意思是，我认为这样做很容易，先添加Class，然后延迟，再删除Class，是什么真正的原因让jQuery开发团队决定不这样做？

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

如果要使用.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文档中看到，不幸的是，它对原生JavaScript setTimeout函数有一些限制：

.delay()方法最适合在排队的jQuery效果之间进行延迟。因为它是有限的。例如，它没有提供取消延迟的方法——.delay()不能取代JavaScript的原生setTimeout函数，后者可能更适合某些用例。

来自文档：

.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);
});

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

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