Jak utworzyć licznik procentowy w jQuery?

Question

Próbowałem utworzyć licznik procentowy, ale nie robi on czegoś, czego potrzebuję. Po prostu pokazuje 100%. Jednak muszę pokazać wszystko od 0 do 100% krok po kroku! Jak mam to zmienić?

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

kwestia, ponieważ pętla for przebiega w ułamku sekundy, niezależnie od setInterval.

Aby rozwiązać ten problem można zmienić logikę do użycia rekurencji a następnie opóźnić każdej iteracji przez 1 sekundę, tak:

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>