进度条函数在一次调用后中断

progress bar function breaking after one call

本文关键字：一次 调用 中断 函数      更新时间：2023-09-26

小提琴

在提供的代码中，如果您单击战斗，它将完成战斗动作并填充进度条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
});

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

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

参见工作 JSFiddle

相关文章：