Javascript animationend启动下一个函数，下一个函数animationend启动两次

我正在使用HTML、CSS和Javascript+Jquery制作一些交互式动画

我有几个动画，我想链。因此，当第一个动画完成时，下一个动画开始，依此类推

第一个功能由单击触发：

function stepOne() {
    console.log(" stepOne ran");
    $('#myObject').attr('class', 'animation1');
    $(".animation1").on("animationend", stepTwo);
}

function stepTwo() {
    console.log("stepTwo ran");
    $("#myObject").removeClass("animation1");
    $("#myObject").addClass("animation2");
    $("#scene").addClass("zoomAnimation");
    $("#scene").on("animationend", stepThree);


    function stepThree() {

//在这里插入一些令人兴奋的代码 控制台日志（“崩溃”）； }

---

我可以在控制台日志中看到，它同时运行第二步和第三步，然后在动画实际结束时再次运行第三步。如何防止它同时运行步骤三和步骤二？这只是一个问题，如果我按顺序运行它。如果我直接跳到第二步，就没有问题了。

几个小时后，我找到了一个解决办法

在函数末尾的animationend侦听器上添加一个微小的延迟似乎是解决方案。 所以它变成了

function stepTwo() {
    console.log("stepTwo ran");
    $("#myObject").removeClass("animation1");
    $("#myObject").addClass("animation2");
    $("#scene").addClass("zoomAnimation");
    setTimeout(function () {
    $(".zoomAnimation").on("animationend", stepThree);
   }, 20);

}

}

等等。这可能不是最好的解决方案，可能会让我在今后的道路上遇到问题，但它似乎是正确的

function stepThree() {
$(".zoomAnimation").off("animationend", stepThree);