用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>