Javascript 如何限制总动画放置立方体的数量，并使它们按添加的顺序设置动画？

当我们点击这个添加按钮时，我们将添加一个新的立方体，它将立即删除，但是如果我们很快点击它，将有太多的立方体删除。我想限制总动画放置立方体的数量

例如，即使我们非常快地单击按钮，页面中添加了10个多维数据集，但只有两个多维数据集正在删除，其他多维数据集必须等待完成

例如，当多维数据集1和多维数据集2完成时，第3和第4个多维数据集将开始下降

我在想也许我们可以有一个全局变量，它是动画立方体总数的++，当一个新立方体开始和结束动画时，使用setInterval检查变量是否小于2，但这不能使动画基于立方体的创建顺序。我能知道怎么解决这个问题吗？非常感谢你

var btn=document.getElementById（'add'）；
var container=document.getElementById（'cubes-container'）；
var-cubeId=0；
btn.addEventListener（'click'，addCube）；
var currentAnimateCount=0；
函数dropCube（多维数据集）{
var-pos=0；
让intervalId=setInterval（函数（）{
如果（位置==200）{
clearInterval（intervalId）；
}否则{
pos++；
cube.style.top=pos+“px”；
}
}, 1);
}
函数addCube（）{
让cube=document.createElement（'div'）；
让cubeContainer=document.createElement（'div'）；
cube.className='cube'；
cube.id=cubeId；
cube.innerHTML=cube.id；
cubeId++；
cubeContainer.className='多维数据集容器'；
cubeContainer.append（多维数据集）；
container.append（cubeContainer）；
设pos=0；
dropCube（多维数据集）
}

#多维数据集容器{
显示：网格；
网格模板列：重复（10，1fr）；
}
.立方体容器{
位置：相对位置；
高度：30px；
}
.立方体{
宽度：30px；
高度：30px；
背景颜色：橙色；
文本对齐：居中；
显示：网格；
对齐项目：居中；
证明项目：中心；
位置：绝对位置；
}

添加新的

考虑以下示例。它使用jQuery而不是JavaScript。它可以用类似的脚本编写

$（函数（）{
函数addCube（目标）{
变量i=$（“.cube”）.长度；
变量容器=$（“”{
类：“多维数据集容器”
}).附于（目标）；
$("", {
类：“立方体”，
id:“立方体-”+i
}).html（i）.appendTo（容器）；
返回容器；
}
函数dropCube（多维数据集）{
$（立方体）.addClass（“坠落”）.animate({
顶部：“200px”
}，2000，函数（）{
$（立方体）。移除类（“下落”）；
如果（立方体长度和（“.falling”）。长度小于2）{
dropCube（cubes.shift（））；
}
});
}
var多维数据集=[]；
$（“#添加”）。单击（函数（）{
push（addCube（“cubes容器”）；
如果（$（“.falling”）。长度小于2）{
dropCube（cubes.shift（））；
}
});
});
/*
var btn=document.getElementById（'add'）；
var container=document.getElementById（'cubes-container'）；
var-cubeId=0；
btn.addEventListener（'click'，addCube）；
var currentAnimateCount=0；
函数dropCube（多维数据集）{
var-pos=0；
让intervalId=setInterval（函数（）{
如果（位置==200）{
clearInterval（intervalId）；
}否则{
pos++；
cube.style.top=pos+“px”；
}
}, 1);
}
函数addCube（）{
让cube=document.createElement（'div'）；
让cubeContainer=document.createElement（'div'）；
cube.className='cube'；
cube.id=cubeId；
cube.innerHTML=cube.id；
cubeId++；
cubeContainer.className='多维数据集容器'；
cubeContainer.append（多维数据集）；
container.append（cubeContainer）；
设pos=0；
dropCube（多维数据集）
}
*/

#多维数据集容器{
显示：网格；
网格模板列：重复（10，1fr）；
}
.立方体容器{
位置：相对位置；
高度：30px；
}
.立方体{
宽度：30px；
高度：30px；
背景颜色：橙色；
文本对齐：居中；
显示：网格；
对齐项目：居中；
证明项目：中心；
位置：绝对位置；
排名：0；
}

新增

Hi，您希望有多少多维数据集等待，您是否会在某个时候删除它们？你可能会发现看CSS动画也很有帮助。@AHaworth@A Haworth嗨！非常感谢您的回复！我想最多只有两个立方体是动画，所有其他人都在等待。如果我很快单击添加按钮，我可能会同时添加10个立方体，但只有前两个立方体在下降，完成后，立方体3和4开始下降，然后在立方体3和4完成后，立方体5和6开始下降。即使在我不断点击添加按钮的同时，他们也总是按照这个顺序。我现在不打算在某个时候删除它们。不要让它持续太久，否则如果您继续创建但不删除，您可能会耗尽存储空间（虽然这需要很长时间）。非常感谢您的帮助！那个数组方法太神奇了！如果我使用纯javaScript和setInterval之类的东西，有没有办法知道哪一个完成了下降动画并触发其他人下降？@xixi我回去也做了一个JS示例。jQuery只是一个JavaScript框架，所以如果你能在jQuery中实现它；您可以将其写回JavaScript。非常感谢您的帮助！我不能投票，因为上面说我“至少需要15个声望才能投票”，但我点击了“接受这个答案”。真的非常感谢你！这个方法太棒了！为什么我不能想出这么神奇的方法呢~我真的需要学习更多关于如何正确使用JavaScript的知识！谢谢大家!@有很多很好的教程和学习更多脚本方法的方法。您还将看到许多关于堆栈溢出的好例子。很快，您将看到可以改进代码的地方，并了解如何更好地使用它。非常感谢您Twisty:D我将尝试了解更多有关前端的信息！