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>