CODEWITHSUNDEEP
javascriptjquery
user6495708
user6495708

Reputation:

execute function on loop by setinterval

I want show and hide a progress bar 10 times. That's why I use a for loop, in which I call the function oneLoop. oneLoop calls the frame function every 100sec. Frame function is used to change the progress bar.

However, the for loop is executed only once. I don't want to use another setInterval function to execute the oneloop function, because unsynchronous events may happen during the intervals and then things become very bad. How can I achieve to execute the oneLoop 10 times and every execution to start after the previous has ended?

Here's the code:

for(var i=0;i<10;i++){
    $(".progress").show();
  var w = {j:100};
  oneLoop(w);
}

function oneLoop(w){

  timerId = setInterval(function(){
    frame(w)
  },100);
}

function frame(w) {
  //when the percentage becomes zero, the progress bar closes 
  if (w.j === 0) {
    clearInterval(timerId);
    $(".progress").fadeOut(); 
  }
  //the percentage is descreased be 1%
  else {
    w.j = w.j - 1;
    $(".progress-bar").width(w.j + '%'); 
  }
}


<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  </div>
</div>

code demo: https://jsfiddle.net/DTcHh/27828/

Upvotes: 0

Views: 95

Answers (2)

luiscrjr
luiscrjr

Reputation: 7268

If I understood correctly, you want to fill and empty the progressbar 10 times, correct? If so, I took the liberty to refactor your code a bit.

My suggestion is to create an object (called here pbControl) and keep track of all this states. Something like this:

var pbControl = {
  position: 0,
  growing: true,
  timesLooped: 0,
  timesToLoop: 10,
  timerId: null
}

$(".progress").show();
startLoop();

function startLoop() {
  pbControl.timerId = setInterval(function() {
    frame()
  }, 100);
}

function frame() {

  if (pbControl.timesLooped == pbControl.timesToLoop) {
    clearInterval(pbControl.timerId);
    $(".progress").fadeOut();  
    return;
  }

  if (pbControl.growing) {
    pbControl.position++;
  } else {
    pbControl.position--;
  }

  if (pbControl.position >= 100) {
    pbControl.growing = false;
    pbControl.timesLooped++;
  } else if (pbControl.position <= 0) {
    pbControl.growing = true;
    pbControl.timesLooped++;
  }


  $(".progress-bar").width(pbControl.position + '%');

    /* debug info */
    document.getElementById('debug').innerText = JSON.stringify(pbControl);
}

Working demo: https://jsfiddle.net/mrlew/cxcpb2wc/

Upvotes: 1

webdeb
webdeb

Reputation: 13211

function oneLoop(onFinish){
  var percent = 100;
  timerId = setInterval(function() {
    if (percent > 0) show(percent--);
    else {
      clearInterval(timerId);
      hide(onFinish);
    }
  }, 100);
}    

function show(percent) {
  $(".progress-bar").width(percent + '%'); 
}

function hide(callback) {
  $(".progress").fadeOut(400, callback);
}


function runLoops(n) {
  if (n > 0)
  oneLoop(function() {
    runLoops(n - 1);
  });
};

runLoops(10);

Upvotes: 1

Related Questions