如何制作间隔计时器？

Question

I have the bootstrap loading bar:

  <div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped active" id="loading" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
  </div>
  </div>

I'm trying to change the width of the bar every few seconds so it looks like the bar is making progress.

I have this but it's not working:

   setInterval(function () {
      var percentl = percentl + 5;
      document.getElementById("loading").style.width = percentl + "%";
  }, 1000);

Answer 1

You're declaring var percentl in the function block, so percentl is declared in the scope of the internal function only, each time the function is invoked the value of percentl is undefined and after setted to NaN (as RobG says in the comment). Try this:

var percentl = 0;
setInterval(function () {
  percentl = percentl + 5;
  document.getElementById("loading").style.width = percentl + "%";
}, 1000);

Answer 2

1) percentl has a local scope in your function. You are redefininng it to the same value every time it is called.

set percentl with a global scope that can be accessed by your anonymous function every time it is called.

2) You are also calling setInterval only once. You should call it in a loop until you reach 100%. Something like:

var percentl = 0;


function increase(){

setInterval(function () {
      percentl = percentl + 5;
      document.getElementById("loading").style.width = percentl + "%";
      if(percentl < 100){
        increase();
      }
  }, 1000);
}

Answer 3

var i = 0;
function increase(){
    setInterval(function () {
        document.getElementById("loading").style.width = i + "%";
        i++;
        increase();
    }, 1000);
}