Hi there, I was trying to set intervals on different elements to count from 0, by creating a function that accepts the element ID, the number you wants the function to count to and the duration time you want the function to finish counting in.
For example, you want to count to 5000 in just 5 seconds, the function will calculate the suitable interval value to finish the task in the given time, when calling the function on 4 elements, three of them finish at the same time, while the element with the biggest value keeps counting in almost 40 seconds, even though they share the same core function.
Here’s the function:
$w.onReady(function () {
$w('#productsNumber').text = '0';
$w('#collectionNumber').text = '0';
$w('#variantsNumber').text = '0';
$w('#countriesNumber').text = '0';
countUp('#productsNumber', 1793, 5);
countUp('#collectionNumber', 202, 5);
countUp('#variantsNumber', 9864, 5);
countUp('#countriesNumber', 69, 5);
});
function countUp(elementId, endNum, endIn) {
let i = 0;
let intervalDuration = (endIn * 1000) / endNum;
$w(elementId).onViewportEnter((event) => {
setInterval(() => {
if (i <= endNum) {
let value = String('+') + i.toLocaleString().toString();
$w(elementId).text = value
i++;
}
}, intervalDuration)
})
}
So the bigger the number, the smaller the interval will be, the first thing that came into my mind, is that there’s a minimum value for the interval duration that the function will accept, I searched the web but found nothing in this regard.
But upon my calculations, any value of the interval less than 4ms will be ignored, and the default 4ms value will be used, that’s the only explanation for taking 40 seconds to count to 10000 as given above, but why? Why there’s a minimum value? And if it’s true, why it’s 4ms?
Regardless of the above, is there a way around to overcome this limitation?
Help is appreciated.
Ahmad