用clearTimeout停止顺序函数/动画？

Question

此代码示例有效，它不适用于具有相同持续时间的动画，而不仅仅是警报。

<script> 

     var timeoutOne = null, 
      timeoutTwo = null, 
      timeoutThree = null; 

     function alertOne() { 

      alert('first message'); 
      timeoutOne = setTimeout(alertTwo, 3000); 

     } 

     function alertTwo() { 

      alert('second message'); 
      timeoutTwo = setTimeout(alertThree, 1000); 

     } 

     function alertThree() { 

      alert('third message'); 
      timeoutThree = setTimeout(alertFour, 1000); 

     } 

     function alertFour() { 

      alert('fourth message'); 

     } 

     function startCountdown() { 

      alertOne(); 

     } 

     function stopCountdown() { 

      clearTimeout(timeoutOne); 
      clearTimeout(timeoutTwo); 
      clearTimeout(timeoutThree); 

     } 

</script> 

我打算有多个链接，但我只限于两个。第一个链接是项目的工作演示。二是所有的问题

working-demo

different-code

我在做这个项目涉及动漫元素重新计算/在重新调整的情况下，重新定位讨论的代码我似乎无法让它工作。我已经为此工作了一个多月，并且我尝试了至少20次不同的迭代。

注意：链接是突出显示的代码（交互式显示的实际演示除外）。

超时测试链接是一个简短的演示，其中四个顺序警报被单个按钮停止。这是我试图完成的关于动画的效果。 请注意，这只是代码，而不是实际的警报/按钮界面

缩短脚本是从有问题的脚本中提取的特定问题代码。

我的解决方案到目前为止是使用三个脚本，计算/定位/动画元素被删除，重新添加，设置，位置，尺寸的三个主要功能被召回，就好像它是一个新的页面...但是我有三个脚本，所以在动画运行时第四次重新缩放之后它会中断。我试图在两个脚本之间切换，但它不能从脚本2转换到1.

警告示例和缩短脚本是我尝试不使用三种脚本方法完成的新尝试在工作演示。

我还没有尝试承诺/推迟呢。我想知道我是否缺少明显的东西。

工作演示中使用的三个脚本分别是第一个，第二个，第三个脚本。

他们几乎是彼此的副本，只有细微的差异。

Answer 1

animationend事件对于我认为您想要做的事更可靠。有趣的是，你不必尝试和动画完成的时刻;你反而依靠浏览器。看看这个例子。

var step_one = document.querySelector('.step.one'); 
 
var step_two = document.querySelector('.step.two'); 
 

 
function stepOneHandler() { 
 
    step_two.classList.add('go'); 
 
} 
 

 
step_one.classList.add('go'); 
 

 
step_one.addEventListener('animationend', stepOneHandler);

@keyframes move-one-right { 
 
    to { transform: translateX(3em); } 
 
} 
 

 
@keyframes move-two-right { 
 
    to { transform: translateX(6em); } 
 
} 
 

 
.step { 
 
    background: red; 
 
    display: block; 
 
    width: 3em; 
 
    height: 1.5em; 
 
    margin-bottom: 1em; 
 
} 
 

 
.step.one.go { 
 
    animation: 1s move-one-right forwards; 
 
} 
 

 
.step.two.go { 
 
    animation: 1s move-two-right forwards; 
 
}

<div class="step one"></div> 
 
<div class="step two"></div>