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

Creating different delays for animations on first and second click + chaining delays

本文关键字：延迟 第二次 链接 动画 创建 第一次      更新时间：2023-09-26

由于篇幅不足，我的标题不是很能说明问题，所以我会更具体一些。我经常有一些想法需要像代码的第一部分或第二部分这样的概念。我直说吧。我觉得对这两种情况使用setTimeout是不合适的。如果没有clearartimeout，它会造成巨大的重叠混乱，而且看起来不太对。这就是我问社区的地方:除了我正在努力实现的目标，还有什么其他选择?除了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);

我会考虑在动画完成时触发自定义事件，这就是实现动画链接的方式。为触发链中的下一个动画的自定义事件创建一个侦听器。这是已经被构建到新的Web动画标准中的东西。如果你想要与不支持的浏览器向后兼容，该API还有一个javascript shim。

相关文章：