Question

首先，this code虽然丑陋，却可以用于所有意图和目的。然而，这真的让我都病了，疯一下。

对于懒惰，代码的主要部分很糟糕：

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.

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

2 个答案: