更好的方式来运行动画的有限循环

Better way to run a finite cycle of animations

本文关键字：循环 动画 运行 方式 更好      更新时间：2023-09-26

首先，这段代码虽然丑陋，但在所有情况下都是有效的。然而，它真的让我既恶心又疯狂。

对于懒惰的人来说，糟糕的主要代码部分是:

setTimeout(function() {
    toggle(); //off
    setTimeout(function() {
        toggle(); //on
        setTimeout(function() {
            toggle(); //off
            setTimeout(function() {
                toggle(); //on, stays for stallTime
                setTimeout(function() {
                    toggle(); //off
                    callback();
                }, stallTime);
            }, 300);
        }, 300);
    }, 300);
}, 300);
我当然喜欢通过改变元素上的CSS类来控制我的动画。然而，transitionend和webkitTransitionEnd等是不可靠的。我是被迫使用这种丑陋的代码吗?理想情况下，我希望能够设置一个可变数量的"闪烁"，但这段代码太俗套了。

请把我从污秽中拯救出来。

var count = 5;
var i = setInterval(function() {
    toggle();
    count--;
    if(count == 0) {
        clearInterval(i);
        callback();
    }
}, 300);

为了避免setInterval，我写了一个递归函数:

// link.addClass('hover'); //on - no longer needed
flash = function(count) {
    if (count > 1) {
        setTimeout(function() {        
            toggle();
            flash(count - 1);
        }, 300);
    } else {
        setTimeout(function() {
            toggle(); //off
            callback();
        }, stallTime);            
    }                
}
flash(6); // 2 * the number of flashes.
相关文章：