Question

由于空间不足，我的标题不太清晰，所以我会更具体。我经常有一些想法需要像第一段或第二段代码这样的概念。我会谈到这一点。我觉得对这两种情况使用setTimeout是不合适的。它创建了一个巨大的重叠混乱没有clearTimeout，只是似乎没有。这是我向社区提出的问题：我想要实现的目标是什么？除了settimout和setinterval之外，在为动画进行复杂链接或注册多次点击时，有没有其他更有效的方式来做事情，如下例所示？

以下是点击示例：

document.getElementById("example").addEventListener("click", function(){

    clicked = false;

    if (clicked = false){
    clearTimeout(t2);
    var t1 = setTimeout(function(){
        // animate 1
    }, 1000);
    }

    else {
    clearTimeout(t1);
    var t2 = setTimeout(function(){
        // animate 1
    }, 2000);
    }

    clicked = !clicked

};

或者存在链接问题：

setTimeout(function(){
    // does stuff
       setTimeout(function(){
            // does stuff
              setTimeout(function(){
                     // does stuff
              }, 1000);
        }, 1000);
}, 3000);

Answer 1

我会考虑在动画完成时触发自定义事件，这就是你完成动画链接的方法。为自定义事件创建一个侦听器，以触发链中的下一个动画。这已经构建到新的Web Animations标准中。如果您希望向后兼容不支持的浏览器，还可以使用API的shim available。

在第一次和第二次点击+链接延迟时为动画创建不同的延迟

1 个答案: