Bootstrap Fortschrittsbalken Progression mit setTimeout

Question

Ich versuche, Bootstrap Fortschrittsbalkenbreite mit SetTimeout() zu erhöhen. Wenn ich den Code ausführe, passiert nichts. Ich überprüfte setTimeout(inc,2000); und injiziere inc();alert(w); und bekam die erwartete Ausgabe. Aber ich weiß nicht, warum setTimeout(inc,2000); nicht funktioniert. Bitte sag mir, was los ist.

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

Der Code hatte mehrere Probleme. Das ernsteste ist die while(w!=100) Schleife, die wahrscheinlich nicht funktioniert, wie Sie vielleicht denken. Es erzeugt +75000 unabhängige Timer-Ereignisse, die den Browser schnell überwältigen.

Eine bessere Lösung ist die Verwendung eines zentralen Timers, der mit setInterval() erstellt wurde, wie im Codeausschnitt unten gezeigt. Durch Klicken auf die Schaltfläche "Bezahlen" wird der Timer gestartet. Es erhöht den Fortschrittsbalken und stoppt dann eine 100%.

Darüber hinaus müssen Sie verhindern, dass der Benutzer mehrmals auf die Schaltfläche klickt. Im Snippet ist die Schaltfläche deaktiviert, bis der Zahlungs-Timer abgeschlossen ist. Der Code verwendet auch die Bootstrap-Benutzeroberfläche (Schaltfläche) und jQuery, die normalerweise zusammen verwendet werden.

Führen Sie das Snippet

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