javascript - 运行有限循环动画的更好方法

Question

首先，这段代码虽然丑陋，但适用于所有意图和目的。然而，它真的让我看着又恶心又生气。

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

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，至少是不可靠的。我是否被迫诉诸这种可怕的代码？理想情况下，我希望能够设置可变数量的“闪烁”，但是这段代码太乏味了。

请救我脱离我的污秽。

Answer 1

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

Answer 2

为了避免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.