setTimeoutを使用したブートストラッププログレスバーの進行

Question

setTimeout（）を使用してブートストラップの進行状況バーの幅を増やそうとしています。コードを実行すると何も起こりません。私はsetTimeout(inc,2000);をコメントアウトし、inc();alert(w);を注入し、期待される出力を得たことを確認した。しかし、なぜsetTimeout(inc,2000);が機能していないのかわかりません。何が間違っているのか教えてください。

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

} 

Answer 1

あなたのコードは、複数の問題を抱えていました。最も深刻なのは、while(w!=100)ループです。あなたが思うように動作していない可能性があります。ブラウザーをすばやく圧倒する独立したタイマーイベントを75000回生成します。

もっと良い解決策は、以下のコードスニペットに示すように、setInterval（）で作成した1つの中央タイマーを使用することです。支払ボタンをクリックすると、タイマーが開始されます。プログレスバーをインクリメントして100％停止します。

さらに、ユーザーが複数回ボタンをクリックしないようにする必要があります。スニペットでは、支払いタイマーが完了するまでボタンは無効になっています。このコードでは、Bootstrap UI（ボタン）とjQueryも使用されています。これらはすべて通常は一緒に使用されます。

実行

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

 

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

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

 
*/

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

 

 

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