setInterval（jQuery）を使用する関数をループする

Question

進捗バーを10回表示して非表示にしたい。だから私はforループを使用しています。これは関数oneLoopを呼び出します。 oneLoopは100秒ごとにフレーム関数を呼び出します。フレーム機能は、進行状況バーを変更するために使用されます。

ただし、forループは1回だけ実行されます。私はoneloop関数を実行するために別のsetInterval関数を使用したくないです。なぜなら、非同期イベントがインターバルの間に起こり、事態が非常に悪くなるからです。 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 + '%'); 
    } 
} 

そしてHTML：

<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

forループは必要ない：

let progress=$(".progress"); 
 
let progressBar=$(".progress>.progress-bar"); 
 
let count=0; 
 
let maxCount=10; 
 
function run(){ 
 
    progressBar.width('100%'); 
 
    progress.fadeIn(400,()=>{ 
 
    \t let w={j:100}; 
 
    let timerId=setInterval(()=>{ 
 
     if (w.j === 0) { 
 
     count++; 
 
     clearInterval(timerId); 
 
     progress.fadeOut(400,()=>{ 
 
     if(count<maxCount) 
 
      run(); 
 
     else 
 
      console.log("ended") 
 
     }); 
 
     } 
 
     else { 
 
     w.j = w.j - 1; 
 
     progressBar.width(w.j + '%'); 
 
     } 
 
    },100); 
 
    }); 
 
} 
 
run();

.progress{ 
 
    width:100px; 
 
    height:20px; 
 
    background-color:blue; 
 
} 
 
.progress-bar{ 
 
    background-color:red; 
 
    height:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> 
 
    </div> 
 
</div>

Answer 2

も、問題ではないということ

var p = 100; 
 
var timerId; 
 
function oneLoop() { 
 
    timerId = setInterval(function() { 
 
    p -= 1; 
 
    frame(); 
 
    }, 100); 
 
} 
 
function frame() { 
 
    if (p === 0) { 
 
    $(".progress").fadeOut(); 
 
    clearInterval(timerId); 
 
    } else { 
 
    $(".progress-bar").width(p + '%'); 
 
    } 
 
} 
 
oneLoop();

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-success" style="width: 100%" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> 
 
    </div> 
 
</div>