Currently, I am working on creating a visual countdown for my users to indicate when an animation will finish. The code snippet below shows my initial attempt:
function setClassAndFire(){
timer = setInterval(function () {
t--;
$(this).attr('class', 'timerAnimation');
countdownTimer();
if (t === 0) {
clearInterval(timer);
timer = undefined;
funcForCall();
}
}, 1000);
}
function countdownTimer(){
var timerCurrentWidth = $('.timerAnimation').width(),
timerMaxWidth = $("#awardQueueText").width(),
pxPerSecond = timerMaxWidth / 60,
currentCountdown = timerCurrentWidth / pxPerSecond;
currentCountdown = Math.round(currentCountdown);
document.getElementById("timer").innerHTML = "<span style='white-space : nowrap;'>Animation ends in:</br></span>"+
"<span style='white-space : nowrap;'>" + currentCountdown + " sec.</span>";
}
It's important to note that the animation countdown only represents the time before we can send an API call. If there is something in the queue, the animation will restart.
The current implementation works but has some hiccups:
Sometimes, the countdown skips subtracting a second and compensates by subtracting 2 seconds in the next iteration.
This issue may be due to using Math.round() on currentCountdown. Is there a workaround for this problem? Since I have the maximum width of the animation object, could I separate it from the current width?
How can I make it work seamlessly? It's crucial to align the timer with the animation for the desired functionality. When the animation count reaches 25, I want the displayed number to also show 25!