I'm trying to increase bootstrap progress bar width using setTimeout(). When I run the code, nothing happens. I checked by menting out setTimeout(inc,2000); and injecting inc();alert(w);and got the expected output. But I don't know why setTimeout(inc,2000); isn't working. Please tell me what's wrong.

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);
    }

}

I'm trying to increase bootstrap progress bar width using setTimeout(). When I run the code, nothing happens. I checked by menting out setTimeout(inc,2000); and injecting inc();alert(w);and got the expected output. But I don't know why setTimeout(inc,2000); isn't working. Please tell me what's wrong.

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);
    }

}

• javascript
• twitter-bootstrap-3
• settimeout

• 1 AFAIK Bootstrap's standard build depends on jQuery. So it looks strange that you don't use jQuery in your code. – hindmost Commented Mar 25, 2016 at 9:07
• What is the purpose of the "while(w!=100)" ? – Yogi Commented Mar 25, 2016 at 9:51
• when the width of progress bar is not 100% @Roberto – Rajshekar Reddy Commented Mar 25, 2016 at 9:52

1 Answer 1

Your code had multiple problems. The most serious is the while(w!=100) loop, which probably isn't working like you might think. It generates +75000 independent timer events that quickly overwhelm the browser.

A better solution is to use one central timer created with setInterval() as shown in the code snippet below. Clicking the pay button starts the timer. It increments the progress bar and then stops at 100%.

Additionally, you need to prevent the user from clicking on the button multiple times. In the snippet, the button is disabled until the payment timer pletes. The code also makes use of the Bootstrap UI (button) and jQuery, all of which are typically used together.

Run the snippet to try

$('#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 + '%');


    // plete
    if (percent >= 100) {
      clearInterval(timerId);
      $('#pay').attr('disabled', false);
      $('#load').removeClass('progress-bar-striped active');
      $('#load').html('payment plete');

      // 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 plete';
  }
  window.progress1.innerHTML = text;
  window.progress1.style.width = percent;
  
}, 500);
  
}

*/

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>



<button type="button" id="pay" class="btn btn-primary" autoplete="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>