простая круговая диаграмма и счетчик: продолжительность и счетчик приходят в одно и то же время
Я использую простую библиотеку круговых диаграмм для визуализации.
Я хочу иметь возможность подсчитывать с той же продолжительностью, что и в ключе анимации простой круговой диаграммы, все работает нормально, за исключением того, что продолжительность анимации простой круговой диаграммы быстрее, чем продолжительность значения счетчика цикла. Как я могу сделать скорость обоих или продолжительность одинаковой, чтобы они достигли одинакового значения?
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();
Заранее спасибо.