Javascript .toggle（）类名称的无限和不确定切换

我不明白为什么在使用动画切换类名时，

.toggle（）

会出现问题。我做了这个实验：

var query=document.querySelector.bind（文档）；
查询（'button'）。addEventListener（'click'，函数（）{
[].forEach.call（查询（'.container'）。子项，函数（框，i）{
setInterval（函数（）{
box.classList.toggle（'popIn'）；
}，300*i）；
})
})

.container>.box{
宽度：100px；
高度：100px；
背景：青色；
显示：内联块；
变换：比例（0）；
过渡：所有0.3秒的缓进缓出；
}
.container>.box.popIn{
变换：比例（1）；
}

点击

您遇到的问题在setInterval函数中。您的意思是，每300毫秒执行一次此事件。您需要的是setTimeout，它告诉事件在300ms后停止。请参阅下面我所做更改的代码段

有关详细信息，请参阅 有关详细信息，请参阅

var query=document.querySelector.bind（文档）；
查询（'button'）。addEventListener（'click'，函数（）{
[].forEach.call（查询（'.container'）。子项，函数（框，i）{
setTimeout（函数（）{
box.classList.toggle（'popIn'）；
}，300*i）；
})
})

.container>.box{
宽度：100px；
高度：100px；
背景：青色；
显示：内联块；
变换：比例（0）；
过渡：所有0.3秒的缓进缓出；
}
.container>.box.popIn{
变换：比例（1）；
}

点击

这是因为

setInterval（）

使用

setTimeout

，而不是

setInterval

正常。非常感谢：）