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

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等。我是不是要诉诸这种可怕的代码？理想情况下，我希望能够设置可变数量的“闪烁”，但此代码太笨拙。

请从我的fil rescue中拯救我。

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.