Javascript 如何使用setInterval重新启动关键帧动画？

我一直在试图找到我的问题的答案，但一直没有找到。
我希望能够在间隔完成后清除间隔，然后能够重新启动间隔。
我当前的代码不允许我这样做：一旦间隔停止，您就不能再运行它了。
这是我的密码：

函数about（）{
var about=document.getElementById（“about”）
about.classList.add（“about mi”）
var moreinfo=setInterval（函数（）{
about.classList.remove（“about mi”）
}, 2000)
clearInterval（更多信息）
}

。关于mi{
动画名称：moreinfo；
动画持续时间：2秒；
}
@关键帧moreinfo{
0%{颜色：黑色；}
50%{颜色：红色；变换：translateY（-20px）；}
100%{颜色：黑色；}
}

▼
关于

实际上，

setInterval

在这里什么都不做。您不需要使用interval，只需使用

setTimeout

函数about（）{
var about=document.getElementById（“about”）
about.classList.add（“about mi”）
var moreinfo=setTimeout（函数（）{
about.classList.remove（“about mi”）
}, 2000)
}

。关于mi{
动画名称：moreinfo；
动画持续时间：2秒；
}
@关键帧moreinfo{
0% {
颜色：黑色；
}
50% {
颜色：红色；
转换：translateY（-20px）；
}
100% {
颜色：黑色；
}
}

▼
关于

当您使用间隔超时删除类

关于mi

以匹配您在css中定义的

2秒

动画持续时间：2s当你开始更改其中一个值时，很难坚持，你必须时刻记住哦哦哦，我还必须更新另一个值，比如说

javascript值

和

css值

在这种情况下，另一种方法是基于事件删除类，如下所示：

var aboutElement=document.getElementById（“关于”）
函数about（）{
aboutElement.classList.add（“关于mi”）
}
aboutElement.addEventListener（“animationend”，function（））{
aboutElement.classList.remove（“关于mi”）；
});
。关于mi{
动画名称：moreinfo；
动画持续时间：2秒；
}
@关键帧moreinfo{
0%{颜色：黑色；}
50%{颜色：红色；变换：translateY（-20px）；}
100%{颜色：黑色；}
}
▼
关于
在您的特定情况下，看起来您只需要运行代码一次，而不是每隔一段时间运行多次，因此@dgknca提到，您只需要一个
设置超时


一般来说，如何重新启动间隔
如果其他用户看到此帖子，请回答此问题。您所能做的最好的事情（据我所知）是使用您想要的功能定义一个非匿名函数，然后在以下时间间隔内使用该函数：

function doSomething() {
    // your logic here
    console.log('I am doing something.');
}

// execute doSomething every 1 second
var interval = setInterval(doSomething, 1000);

interval = setInterval(doSomething, 1000);

与此类似，您可以使用以下方法取消间隔：

clearInterval(interval);

要“重新启动”间隔，您需要将
interval
分配给新间隔：

function doSomething() {
    // your logic here
    console.log('I am doing something.');
}

// execute doSomething every 1 second
var interval = setInterval(doSomething, 1000);

interval = setInterval(doSomething, 1000);

这段代码毫无意义，您的间隔会立即被清除，因此回调将永远不会运行。如果您的代码是这样编写的，那么间隔将永远不会运行。您始终可以使用非匿名定义的函数作为回调函数。在您花了一些时间学习
setTimeout
和
setInterval
之后，您可能需要查看。在2秒内按下按钮时，您需要取消计时器，以防止由于动画而出现异常行为。尝试每隔1秒发送一次按钮。@MarkBaijens此特定代码似乎只删除一个类（而不是打开和关闭它）。因此，即使用户多次单击按钮，类名基本上也会被多次删除（导致相同的外观），还是我遗漏了什么？@AnisR。该类将在css动画结束之前删除，因为多个计时器同时运行<代码>动画结束

事件将解决其他人提到的问题。