javascript - 使用 setTimeout 引导进度条进度

Question

我正在尝试使用 setTimeout() 增加引导进度条宽度。当我运行代码时，什么也没有发生。我通过注释 setTimeout(inc,2000); 并注入(inject) 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>