Question

我目前正在尝试为动画完成时我的用户进行视觉倒计时。我目前的尝试看起来有点像这样：

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>";
}

重要的是要知道动画只显示我们可以发送API调用的时间。因此，如果我们有队列中的东西，动画将重新参与。

因此，您可以看到我当前的尝试是有效的，但是有些什么是笨拙的：

倒计时有时无法减去秒和“修正” 在下一次尝试中减去2秒钟。

这可能是由 currentCountdown 的 Math.round（）引起的，但是有解决方法吗？我的意思是我有动画对象的最大可能宽度，可以从当前宽度中分离出来。

有没有办法让它发挥作用？我们需要将计时器与动画相关联以实现所需的行为。因此，当动画计数达到25时，我希望显示的数字也是25！

Answer 1

你遇到了这个问题，因为你从宽度得到了数字，而且宽度不能有小数（或者更好，它们可以但是它们有时会被截断）。所以我的建议是对你要显示的数字和DOM元素的宽度使用不同的变量。在我看来，变量t就是我所说的，所以只是尝试使用它。

 function setClassAndFire(){
        timer = setInterval(function () {
                t--; //What is t? 
                $(this).attr('class', 'timerAnimation');
                countdownTimer(t);
                if (t === 0) {
                    clearInterval(timer);
                    timer = undefined;
                    funcForCall();
                }
        }, 1000);  
    }

function countdownTimer(t){
        document.getElementById("timer").innerHTML = "<span style='white-space : nowrap;'>Animation ends in:</br></span>"+
            "<span style='white-space : nowrap;'>" + t+ " sec.</span>";
}

Javascript：animation.width（）倒计时

1 个答案: