根据变量值使动画执行一定次数

Question

我知道我的小提琴有点混乱，但如果没有所有这些代码，它就无法工作。我需要这样做，以便点击按钮将导致径向进度条中的h2倒计时，每次倒计时动画一次并与所选怪物执行另一场战斗，直到autoLeft的数量达到零，在这种情况下autoLeft将重置和战斗将停止，直到再次单击该按钮。

Jsfiddle

var oneAction = function() {
    var round = 0;
    monsterEl = $('#monsterList option:selected');
    monster = monsterEl.data('monster');
  $('.progress').addClass('activated activatedAfter');
  $('#autos').text(player.autoLeft);
  $('#dam').empty();
  $('#monsterdam').empty();
  while(monster.hp > 0 && player.hp > 0 && round < 20) {
      $('#monsterdam').append("</p>The " + $('#monsterList').val() + " has hit you for " + monster.monsterDam() + " damage</p>");
      player.hp -= monster.monsterDam();
    $('#dam').append("</p>You have hit the " + $('#monsterList').val() + " for " + monster.playerDam() + " damage</p>");
    monster.hp -= monster.playerDam();
    round +=1;
        if(round >=20) {
            $('#monsterdam').append("</p>The battle has timed out</p>");
            $('#dam').append("</p>The battle has timed out</p>");
        }
  }
  if(monster.hp <= 0){
  $('#dam').append("<p>You have defeated the " + $('#monsterList').val() + ", you have received " + monster.exp + " experience and " + monster.gold + " gold!</p>");
    monster.hp = monster.fullLife;
    player.hp = player.fullLife;
    player.exp += monster.exp;
    player.gold += monster.gold;
    player.nextLevel -= monster.exp;
    player.implement();
    if(player.exp >= player.expNeeded) {
        lvlUp();
    }
}
if(player.hp <= 0){
$('#monsterdam').append("<p>The " + $('#monsterList').val() + " has defeated you!</p>");
  monster.hp = monster.fullLife;
  player.hp = player.fullLife;
}
}

$('#battleButton').click(function() {
    //playerDam()
    if(player.autoLeft > 0) {
        oneAction();
        player.autoLeft -= 1;
    }
});