jQuery animate() 动画未完成

Question

我遇到了一个问题，jQuery的animate()函数没有完成我的数字计数动画。该动画只是简单地从0计数到5000，但有时候当刷新页面时，它会在4999或4989等不同数字结束。

它正确工作的次数约为80%，但有 20% 的概率在刷新页面时会以不同的数字结束动画。我做错了什么呢？

参考链接：http://jsbin.com/dobajepoti/2/ （不断刷新页面以查看效果）

- user3658991

---

哇，这太过了。你应该用最简单的方法来完成，也就是使用纯JavaScript。这样的事情让我相信框架正在危害人们的编程之旅。所以，请转向[vanilla-js]（http://vanilla-js.com/）。 - Sharky

也许，调用commaSeparateNumber()函数5000次的时间不足一秒。增加到两秒的话，每次都能达到5000次。 - alexP

Answer 1

step()函数并不保证在每个中间值上都被调用，而是在动画的每个步骤上被调用（可以通过超时或请求下一个动画帧来定义）。因此，最终值5000并不总是构成动画步骤。

为确保它能够实现，您可以将每步函数分配给done回调函数：

$(thing).animate({
  // ...
  step: myStepFunction,
  done: myStepFunction
});

例如 http://output.jsbin.com/fagicunuye

- James

---

糟糕，看起来 JSBin 挂了。我稍后再试。 - user3658991

Answer 2

不使用jQuery尝试：

var count = 0;
var counter = setInterval(countUp, 1);
var output = document.querySelector("[data-value]");
var max = output.getAttribute("data-value");

function countUp() {
    count = count + 25;
    if (count > max) {
        clearInterval(counter);
        return;
    }
    output.innerHTML = count;
}

- alexP

Answer 3

问题在于您将动画设置为1000毫秒。根据CPU的不同，可能无法在此时间内计算5000次。您可以将其动画化更长时间，并使用stop()在满足条件时停止动画。

- ImreNagy