如何在jQuery中創建百分比計數器？

Question

我試圖創建一個百分比計數器，但它沒有做我需要的東西。它只顯示100％。不過，我需要一步一步顯示所有0到100％！我應該如何改變它？

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

的問題是，因爲for環在幾分之一秒內運行，而不管的setInterval的。

爲了解決這個問題，你可以改變你的邏輯來使用遞歸，然後用1秒的延遲每次迭代中，像這樣：

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>