Как создать счетчик процентов в jQuery?

Я попытался создать процентный счетчик, но он не делает то, что мне нужно. Он просто показывает 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>
6
html jquery percentage

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>
10