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事件更可靠。很不错的是，您不必尝试计算动画结束的确切时刻;你反而依赖浏览器。看看这个例子。

＆＃13;

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);

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

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

1 个答案: