простая круговая диаграмма и счетчик: продолжительность и счетчик приходят в одно и то же время

Я использую простую библиотеку круговых диаграмм для визуализации.

Я хочу иметь возможность подсчитывать с той же продолжительностью, что и в ключе анимации простой круговой диаграммы, все работает нормально, за исключением того, что продолжительность анимации простой круговой диаграммы быстрее, чем продолжительность значения счетчика цикла. Как я могу сделать скорость обоих или продолжительность одинаковой, чтобы они достигли одинакового значения?

HTML:

      <div class="percentile">
        <div class="percentile-value" data-percent="99">
          <p class="circle"></p>
        </div>
      </div>

js:

      $(function () {
  $(".percentile-value").easyPieChart({
    //your options goes here
    size: 500,
    lineWidth: 6,
    barColor: "#055a82",
    animate: {
      duration: 5000,
      enabled: true,
    },
  });
});
let counter = 99;
let circlePara = document.querySelector(".circle");
const slowLoop = (time) => {
  return new Promise((resolve) => setTimeout(resolve, time));
};

const increaseCounter = async () => {
  for (let i = 0; i <= counter; i++) {
    await slowLoop(180);
    circlePara.innerHTML = `${i}`;
  }
};

increaseCounter();

Заранее спасибо.

0 ответов

Другие вопросы по тегам