交叉点观察器和动画数字计数器

Question

下面代码的问题是计数器不会同时停止。有什么方法可以调整计数器的持续时间吗？据我所知，通过使用动画函数JQuery，可以调整持续时间，但我想知道如何将其与"交叉点观察者"相结合，以便在数字变为可见时运行动画数字。

const counterElements = document.querySelectorAll(".count");
// Counters
function counter(target, start, stop) {
target.innerText = 0.1;
const counterInterval = setInterval(() => {
start += 0.1;
const valueConverted = (Math.round(start * 100) / 100).toFixed(1);
target.innerText = valueConverted;
if (valueConverted == stop) {
clearInterval(counterInterval);
}
}, 30);
}
function obCallBack(entries) {
entries.forEach((entry) => {
const { target } = entry;
const stopValue = target.innerText;
const startValue = 0;
if (!entry.isIntersecting) return;
counter(target, startValue, stopValue);
counterObserver.unobserve(target);
});
}
const counterObserver = new IntersectionObserver(obCallBack, { threshold: 1 });
counterElements.forEach((counterElem) => counterObserver.observe(counterElem));

.emptyspace{
height:400px;
}

<div class="emptyspace"></div>
<p class="count">5.2</p>
<p class="count">50.9</p>
</div>

Answer 1

您应该使用比率而不是固定数字。

const speed = 100;
const inc = Number(stop / speed);

const counterElements = document.querySelectorAll(".count");
const speed = 100; // the lower the slower
// Counters
function counter(target, start, stop) {
target.innerText = 0.1;
const counterInterval = setInterval(() => {
const inc = Number(stop / speed);
start += inc;
const valueConverted = (Math.round(start * 100) / 100).toFixed(1);
target.innerText = valueConverted;
if (valueConverted == stop) {
clearInterval(counterInterval);
}
}, 30);
}
function obCallBack(entries) {
entries.forEach((entry) => {
const { target } = entry;
const stopValue = target.innerText;
const startValue = 0;
if (!entry.isIntersecting) return;
counter(target, startValue, stopValue);
counterObserver.unobserve(target);
});
}
const counterObserver = new IntersectionObserver(obCallBack, { threshold: 1 });
counterElements.forEach((counterElem) => counterObserver.observe(counterElem));

.emptyspace{
height:400px;
}

<div class="emptyspace"></div>
<p class="count">5.2</p>
<p class="count">50.9</p>
</div>