如何限制动画掉落立方体的总数并使其按添加的顺序进行动画处理？

Question

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

例如，即使我们非常快速地点击按钮并在页面中添加了 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;

function dropCube(cube) {
  var pos = 0;
  let intervalId = setInterval(function() {
    if (pos == 200) {
      clearInterval(intervalId);
    } else {
      pos++;
      cube.style.top = pos + "px";

    }
  }, 1);

}

function addCube() {
  let cube = document.createElement('div');
  let cubeContainer = document.createElement('div');
  cube.className = 'cube';
  cube.id = cubeId;
  cube.innerHTML = cube.id;
  cubeId++;
  cubeContainer.className = 'cube-container';
  cubeContainer.append(cube);
  container.append(cubeContainer);
  let pos = 0;
  dropCube(cube)


}

#cubes-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.cube-container {
  position: relative;
  height: 30px;
}

.cube {
  width: 30px;
  height: 30px;
  background-color: orange;
  text-align: center;
  display: grid;
  align-items: center;
  justify-items: center;
  position: absolute;
}

<button id="add">add new</button>
<div id="cubes-container">
</div>

Answer 1

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

$(function() {
  function addCube(target) {
    var i = $(".cube").length;
    var container = $("<div>", {
      class: "cube-container"
    }).appendTo(target);
    $("<div>", {
      class: "cube",
      id: "cube-" + i
    }).html(i).appendTo(container);
    return container;
  }

  function dropCube(cube) {
    $(cube).addClass("falling").animate({
      top: "200px"
    }, 2000, function() {
      $(cube).removeClass("falling");
      if (cubes.length && $(".falling").length < 2) {
        dropCube(cubes.shift());
      }
    });
  }

  var cubes = [];

  $("#add").click(function() {
    cubes.push(addCube("#cubes-container"));
    if ($(".falling").length < 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;

function dropCube(cube) {
  var pos = 0;
  let intervalId = setInterval(function() {
    if (pos == 200) {
      clearInterval(intervalId);
    } else {
      pos++;
      cube.style.top = pos + "px";
    }
  }, 1);

}

function addCube() {
  let cube = document.createElement('div');
  let cubeContainer = document.createElement('div');
  cube.className = 'cube';
  cube.id = cubeId;
  cube.innerHTML = cube.id;
  cubeId++;
  cubeContainer.className = 'cube-container';
  cubeContainer.append(cube);
  container.append(cubeContainer);
  let pos = 0;
  dropCube(cube)
}
*/

#cubes-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.cube-container {
  position: relative;
  height: 30px;
}

.cube {
  width: 30px;
  height: 30px;
  background-color: orange;
  text-align: center;
  display: grid;
  align-items: center;
  justify-items: center;
  position: absolute;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">add new</button>
<div id="cubes-container"></div>

使用数组，您可以.shift() 数组的第一项。此外，为掉落的物品添加一个类别可以让您计算哪些物品正在掉落。我喜欢使用 Animate，因为它允许在动画完成时进行回调，因此您可以检查下一个项目。

JavaScript 更新

var btn = document.getElementById('add');
var container = document.getElementById('cubes-container');
var cubes = [];
btn.addEventListener('click', function(event) {
  cubes.push(addCube());
  if (document.getElementsByClassName("falling").length < 2) {
    dropCube(cubes.shift());
  }
});

function dropCube(cube) {
  var pos = 0;
  cube.classList.add("falling");
  var intervalId = setInterval(function() {
    if (pos == 200) {
      clearInterval(intervalId);
      cube.classList.remove("falling");
      if (document.getElementsByClassName("falling").length < 2 && cubes.length) {
        dropCube(cubes.shift());
      }
    } else {
      pos++;
      cube.style.top = pos + "px";
    }
  }, 1);
}

function addCube() {
  let cube = document.createElement('div');
  let cubeContainer = document.createElement('div');
  cube.className = 'cube';
  cube.id = document.getElementsByClassName("cube").length;
  cube.innerHTML = cube.id;
  cubeContainer.className = 'cube-container';
  cubeContainer.append(cube);
  container.append(cubeContainer);
  return cubeContainer;
}

#cubes-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.cube-container {
  position: relative;
  height: 30px;
}

.cube {
  width: 30px;
  height: 30px;
  background-color: orange;
  text-align: center;
  display: grid;
  align-items: center;
  justify-items: center;
  position: absolute;
  top: 0;
}

<button id="add">add new</button>
<div id="cubes-container"></div>