javascript - 进度条功能在一次调用后中断

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