一次通话后进度条功能中断

Question

Fiddle

在你提供的代码中点击战斗它将完成战斗动作并填充进度条3次（等于var auto）如果你让它完成然后再点击战斗进度条将达到val 25并冻结。为什么这样，我该如何解决？

var auto = 3;
var nb = 0;

var progress = function(sec) {
    if($('#bar').val() === 0) {
    $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage").fadeIn(400);
  }
  if($('#bar').val() >= 75) {
    $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage").fadeOut(800);
  }
  var interval = 1000; //milliseconds 
  setTimeout(function() {     
    sec = sec + 25;
    $('#bar').val(sec);
    if (sec > 100) {
      $('#bar').val(0);
      sec = 0;
      nb++;
    }
    if (nb < auto) progress(sec); //call self with new value
  }, interval)
}

$('#battle').click(function() {  
  progress(0); //initialize progress bar
});

Answer 1

问题是您的nb变量未重置。以下代码/条件应该有效：

if (nb < auto) 
  progress(sec);
else
  nb = 0;

参见 JSFiddle