Как создать счетчик процентов в 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>
1 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