Wie erstelle ich einen Prozentzähler in jQuery?

Question

Ich habe versucht, einen Prozentsatz-Zähler zu erstellen, aber es tut nichts, was ich brauche. Es zeigt nur 100%. Allerdings muss ich alle 0 bis 100% Schritt für Schritt zeigen! Wie sollte ich es ändern?

setInterval(function per(p = 0) { 
 
    for (p = 1; p <= 100; p++) { 
 
    $(".percentage").text(p + "%"); 
 
    } 
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="percentage"></p>

Answer 1

Das Problem ist, weil die for Schleife in einem Bruchteil einer Sekunde ausgeführt wird, unabhängig von der setInterval.

dies zu beheben Sie Ihre Logik Rekursion zu verwenden, ändern könnte und dann jede Iteration Verzögerung um 1 Sekunde, wie folgt aus:

function updatePercentage(p) { 
 
    p = p || 0; 
 
    $(".percentage").text(p + "%"); 
 
    if (p < 100) { 
 
    setTimeout(function() { 
 
     updatePercentage(++p); 
 
    }, 1000); 
 
    } 
 
} 
 

 
updatePercentage();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="percentage"></p>