Question

我正在尝试使用setTimeout（）增加bootstrap进度条的宽度。当我运行代码时，没有任何反应。我通过评论setTimeout(inc,2000);并注入inc();alert(w);并获得预期输出来检查。但我不知道为什么setTimeout(inc,2000);无效。请告诉我出了什么问题。

HTML

<input id="input-button" type="submit" value="Submit" onclick="pay()">
    <div class="progress" id="submit_progress">
      <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
      aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="load" style="width:0%">
        0%
      </div>
    </div>

javascipt的

function inc()  {
    var w= parseInt(document.getElementById("load").style.width);
    w=w+10;
    document.getElementById("load").style.width= w + '%';

}
function pay()  {
    var w= parseInt(document.getElementById("load").style.width);
    while(w!=100)   {
        setTimeout(inc,2000);
        w= parseInt(document.getElementById("load").style.width);
    }

}

Answer 1

您的代码存在多个问题。最严重的是while(w!=100)循环，它可能不像您想象的那样工作。它会产生+75000个独立的计时器事件，很快就会超过浏览器。

更好的解决方案是使用一个使用setInterval（）创建的中央计时器，如下面的代码片段所示。单击“付款”按钮可启动计时器。它会增加进度条，然后停止100％。

此外，您需要阻止用户多次单击该按钮。在代码段中，按钮被禁用，直到付款计时器完成。该代码还使用了Bootstrap UI（按钮）和jQuery，所有这些都通常一起使用。

运行代码段以尝试

$('#pay').click(function() {

  var timerId, percent;

  // reset progress bar
  percent = 0;
  $('#pay').attr('disabled', true);
  $('#load').css('width', '0px');
  $('#load').addClass('progress-bar-striped active');


  timerId = setInterval(function() {

    // increment progress bar
    percent += 5;
    $('#load').css('width', percent + '%');
    $('#load').html(percent + '%');


    // complete
    if (percent >= 100) {
      clearInterval(timerId);
      $('#pay').attr('disabled', false);
      $('#load').removeClass('progress-bar-striped active');
      $('#load').html('payment complete');

      // do more ...

    }

  }, 200);


});








/*

function inc() {
  var w = parseInt(document.getElementById("load").style.width);
  w = w + 10;
  document.getElementById("load").style.width = w + '%';
  //console.log('inc: w=' + w );

}
var c=0;
function pay() {
  var w = parseInt(document.getElementById("load").style.width);
  while (w != 100) {
    c++;  // 75k times!!!
    console.info( 'w=' + w + ', c=' + c);
    setTimeout(inc, 2000);
    console.log( 'timer' );
    w = parseInt(document.getElementById("load").style.width);
  }

}

*/

/*


function pay() {

var timerId = setInterval(function() {
  
  var text, percent = parseInt( window.progress1.innerHTML );
  
  if (percent < 100) {
    percent = (percent + 10) + '%';        
    text = percent;
  }
  else {
      clearInterval( timerId );
      percent = '100%';
      text = 'Payment complete';
  }
  window.progress1.innerHTML = text;
  window.progress1.style.width = percent;
  
}, 500);
  
}

*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<button type="button" id="pay" class="btn btn-primary" autocomplete="off" style="width:8em">
  Pay
</button>

<div class="progress" id="submit_progress" style="width:50%">
  <div class="progress-bar progress-bar-success " role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="load" style="width:0%">
    0%
  </div>
</div>

使用setTimeout引导进度条进度

1 个答案: