更好的方式來運行動畫的有限循環

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.