setTimeout kullanarak Bootstrap ilerleme çubuğu ilerleme durumu

Question

SetTimeout() kullanarak bootstrap ilerleme çubuğu genişliğini artırmaya çalışıyorum. Kodu çalıştırdığımda hiçbir şey olmuyor. setTimeout(inc,2000);'u yorumlayarak ve inc();alert(w);'u enjekte ederek kontrol ettim ve beklenen çıktıyı aldım. Ama neden setTimeout(inc,2000); çalışmadığını bilmiyorum. Lütfen bana neyin yanlış olduğunu söyle.

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

Kodunuz çoklu sorunları vardı. En ciddi olanı, muhtemelen düşünebileceğiniz gibi çalışan while(w!=100) döngüdür. Tarayıcıya hızlıca basan +75000 bağımsız zamanlayıcı olayları üretir.

daha iyi bir çözüm aşağıdaki kod parçasında görüldüğü gibi setInterval ile oluşturulan tek bir merkezi zamanlayıcı() kullanmaktır. Ödeme düğmesine tıklamak zamanlayıcıyı başlatır. İlerleme çubuğunu artırır ve sonra% 100 durur.

Ayrıca, düğme birden çok kez tıklayarak kullanıcıyı engellemek gerekir. Pasajda, ödeme zamanlayıcısı tamamlanıncaya kadar düğme devre dışı bırakılır. Kod aynı zamanda hepsi birlikte kullanılan Bootstrap UI (düğme) ve jQuery'yi de kullanır.

çalıştır pasajı

$('#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>