带.delay的进度条

Question

Fiddle 我想让进度条每秒填充25％。我目前的代码使其达到100％，并保持点击。我不确定是否最好使用jquery或css。或者如果有更简单的方法来做到这一点。 另外，如何使一个动作多次发生.click。就像你点击战斗并击中怪物，然后等待进度条填充，然后再次击中怪物等等？

$('#battle').click(function() { 
    $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage"); 
    $('#bar').val(25).delay(1000); 
    $('#bar').val(50).delay(1000); 
    $('#bar').val(75).delay(1000); 
    $('#bar').val(100); 
}); 

Answer 1

在这里，你去！ https://jsfiddle.net/6nrjw0Le/

对于你的榜样，我使用

setTimeout() 

你的榜样编辑。

var progress = function(sec){ 
    var interval = 250;//milliseconds 
    setTimeout(function(){ 
    sec = sec+25; 
     $('#bar').val(sec); 
     if(sec < 100) 
      progress(sec);//call self with new value 
    },interval) 
} 

$('#battle').click(function() { 
    $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage"); 
    /*$('#bar').val(25).delay(1000); 
    $('#bar').val(50).delay(1000); 
    $('#bar').val(75).delay(1000); 
    $('#bar').val(100);*/ 
    progress(0);//initialize progress bar 
}); 

delay（）是异步的。延迟一个接一个并不意味着你在第一个完成之后得到执行。