jQuery向上计数大量

Question

我有下面的jquery动画，可以在1秒内增加数字。

$({ count: 0 }).animate({ count: 12000 }, {
duration: 1000,
easing: 'swing',
step: function() {
let mathCount = Math.ceil(this.count).toLocaleString('en');
$('.my-element').text(mathCount);
},
complete: function() {
console.log('finished')
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="my-element"></span>

我还使用toLocaleString()添加小数点。

当我计算像12000这样的大数字时，它会达到11,998或更低。为什么会发生这种情况？

如果我将持续时间增加一秒钟以上，它就会起作用。如何在不更改持续时间的情况下达到正确的数字？

Answer 1

查看.animate()API的文档，我认为答案可能很简单，因为您没有将.animate()用于其预期目的任何超出记录范围的使用都不能保证有效(也可能无效(。

我这么说是因为文件中指出.animate()旨在：

对一组CSS属性执行自定义动画。

所有文档都显示了传递的初始对象，该对象被链接为CSS选择器，而不是任意对象。所有示例还表明，作为第一个参数传递给.animate()的属性将是有效CSS属性的对象。

特别值得注意的是.step():的预期用途

为每个动画元素的每个动画属性调用的函数此函数提供了一个修改Tween对象的机会，以便在设置属性之前更改该属性的值

(增加强调(

基于此读数，.step仅用于调整值，然后jQuery将在内部获取调整后的值并将其应用于有问题的元素。但是，您正在绕过这个过程，并使用它来直接操作元素自己。

如果我不得不大胆猜测，我会说，对于动画周期中的最终更新，步骤是跳过，因为jQuery假设它只是设置CSS的最终值，所以不需要调整。正如问题评论中所述，您可以简单地使用complete挂钩来设置它，但最终您滥用/误用了.animate()方法，当您在文档化的API之外工作时，您将面临库更新行为的潜在中断。相反，我建议探索一种不同的方法来实现这种效果，而不是利用jQueryneneneba API的未记录、意外使用。

(更新：虽然不是但一个类似问题的重复答案询问如何使用animate()更新文本内容提供了类似的答案…(