通过setinterval在循环上执行函数

Question

我想要显示并隐藏进度条10次。这就是为什么我使用for循环，我在其中调用函数oneLoop。 oneLoop每100秒调用一次帧功能。框架功能用于更改进度条。

但是，for循环只执行一次。我不想使用另一个setInterval函数来执行oneloop函数，因为在间隔期间可能发生非同步事件，然后事情变得非常糟糕。如何执行oneLoop 10次，每次执行都要在上一次结束后启动？

以下是代码：

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>

代码演示：https://jsfiddle.net/DTcHh/27828/

Answer 1

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

Answer 2

如果我理解正确，你想填充并清空进度条10次，对吗？如果是这样，我冒昧地重构你的代码。

我的建议是创建一个对象（此处称为pbControl）并跟踪所有这些状态。像这样：

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

工作演示： https://jsfiddle.net/mrlew/cxcpb2wc/