Javascript 如何使用setTimeout添加和删除CSS类n次？

我想添加和删除CSS类

n

次以显示动画，以显示效果

n

次，就像设置

动画迭代计数时一样，不同之处在于这里有两个动画，第二个延迟

我的想法是使用
setTimeout
，所以我阅读了，但没有得到预期的结果

这里是一个片段-和一个-与动画（显示一次）


$（“按钮”）。单击（函数（）{
$（'div'）.addClass（'a'）；
$（this.attr（'disabled'，'true'）.text（'Started'）；
setTimeout（函数（）{
$（'div'）.removeClass（'a'）；
$（'button'）.removeAttr（'disabled'）.text（'Finished | reach'）；
},6000);
});
div{
宽度：100px；高度：100px；背景：红色；
}
.a{
动画：a 2s线性，b 2s线性；
}
@关键帧{
来自{背景：红色；}
至{背景：蓝色；}
}
@关键帧b{
来自{背景：蓝色；}
至{背景：黑色；}
}

开始
您可以使用
设置间隔
并计算迭代次数

var n = 3;
var iterationCount = 0;

$('button').click(function(){
clearInterval(animInterval);

var animInterval = setInterval(function(){
    $('div').toggleClass('a');
    iterationCount++;

    if (n == iterationCount)
        clearInterval(animInterval);
  },4000);
});

css方式

在我看来，用js重复动画似乎是错误的。有
动画迭代计数
属性，如果不添加多个
@关键帧
，您应该能够实现您所追求的目标。对于您的示例代码，它非常简单（尽管我怀疑您的真实动画可能有点不同：

.a {
  animation: a 2s linear 5 alternate;
}

@keyframes a {
  0% { background: red; }
  50% { background: blue; }
  100% { background: black; }
}

如果你找不到用css实现动画的方法，请随意发布你的真实动画。

js方式

如果你坚持使用js方式，你需要确保在每个周期后重置超时。这可以通过递归调用函数来实现。在计数器的帮助下，你可以轻松控制它运行的次数。按照以下顺序：

$('button').click(function(){
  $('div').addClass('a');

  $(this).attr('disabled','true').text('Started');

  var counter = 5;

  function repeater() {
    if (counter >= 0) {
       $('div').toggleClass('a');
       counter--;
       // start new cycle
       setTimeout(repeater, 3000);
    } else {
       // cleanup
       $('button').removeAttr('disabled').text('Finished | Again');
    }
  }

  // boot the repeater
  repeater()
});

您可以处理animationend事件。请看以下代码：

$('div').on('animationend', function (data) {
 if (data.originalEvent.animationName === 'b') {
  $('div').removeClass('a');
  iteration++;
  if (iteration < n) {
   setTimeout(function () {  $('div').addClass('a'); });
  } else {
   iteration = 0;
   $('button').removeAttr('disabled').text('Finished | Again');
  }
 }
});

$（'div'）。在（'animationend'，函数（数据）上{
如果（data.originalEvent.animationName==='b'）{
$（'div'）.removeClass（'a'）；
迭代++；
if（迭代

有一个参数data.originalEvent.animationName，它指示动画名称已结束。您的最后一个动画是b。因此，您必须删除类并再次添加它。您还必须保留当前迭代次数和最大迭代次数。请在此处检查此项：
这是您的小提琴的更新：


正如您所看到的，这将重复动画任意多次，也可以容纳多个动画，但有点混乱。因为您已经在使用jQuery，我建议您研究jQuery的动画API，它（我认为）具有更强大的回调功能，但我几乎不使用jQuery，因此您必须研究它

如果这还不包括你想要的，也许你可以在网上找到一个例子来更好地说明你的问题

（js/jquery供参考-尽管我也更新了关键帧以添加另一个动画，所以请看小提琴）

你能更详细地说明你想要实现的目标吗？如果你想让setTimeout运行多次（就像在你链接的另一个线程中一样），你必须递归调用它，而不是在这里执行。与
setInterval（）
，
setTimeout（）不同
不会重复，我看不到您的
设置超时
调用任何会导致它再次运行的东西。@Damon是的，因为正如我所说，我没有得到预期的结果。我想重复多次动画n次，但我不知道如何做。我提到了“设置超时”作为一个选项。最好的方法是什么？谢谢！使用setInterval（）和clearInterval（）。基本上设置一个变量，比如说
interval
，并将其设置为您的
setInterval
函数。有一个计数器n。在间隔的n个循环之后，调用
clearInterval（interval）；
（编辑：如果您需要一个示例，我会在答案中发布一些内容-让我知道这是否有效）@Damon你能举个例子吗？谢谢谢谢谢谢，但是我必须使用多个动画，背景色就是一个例子。谢谢，但是我必须使用多个动画，背景色就是一个例子。我最后一句话的意思是，“请随意发布你的真实动画”。无论如何，如果你坚持走js路线（这可能没有必要），我已经用一个可能的解决方案更新了我的答案。
$('button').click(function(){
    $('div').addClass('a');

  $(this).attr('disabled','true').text('Started');

  var n = 0;

  var interval = setInterval(function() {
    $('div').removeClass('a');

    if (n === 5) {
        clearInterval(interval);
        $('button').removeAttr('disabled').text('Finished | Again');
    } else {
      setTimeout(function() {
        $('div').addClass('a');
      }, 0)
      n++;
    }
  }, 4500);
});