Javascript 如何延长jQuery的更新间隔或减少步骤数'；s.animate（）方法？

使用jQuery制作动画非常简单。下面是一个在2秒内设置数字从0到1000的动画的示例：

var $h1 = $('h1'),
    startValue = parseInt($h1.text(), 10),
    endValue = parseInt($h1.data('end-value'), 10);
$({ int: startValue })
  .animate({
    int: endValue
  }, {
    duration: 2 * 1000,
    step: function () {
      $h1.text(Math.ceil(this.int));
    }
  });

工作示例：

此动画看起来不错，但在动画期间的任何时候都很难读取数字，因为下一个数字会在毫秒内替换它。理想情况下，我希望在相同的时间长度上设置数字动画，但使用较少的步骤（增加更新间隔的长度），以便在设置动画时更容易一目了然地读取数字

jQuery似乎不能直接控制动画中的步骤数，也不能直接控制更新间隔；它似乎只接受接收插值的

---

有没有一种方法可以调整jQuery用于在动画持续时间内插值动画的步骤数？

这里有一种方法，我用来模拟这种情况，对于日常用途来说可能已经足够好了。但是，从性能角度来看，这并不理想，因为jQuery调用

step

函数的次数与最初调用的次数相同

var $h1 = $('h1'),
    startValue = parseInt($h1.text(), 10),
    endValue = parseInt($h1.data('end-value'), 10),
    stepCounter = 0,
    showNthStep = 8;
$({ int: startValue })
  .animate({
    int: endValue
  }, {
    duration: 2 * 1000,
    step: function () {
      if (stepCounter++ === showNthStep) {
        $h1.text(Math.ceil(this.int));        
        stepCounter = 0;
      }
    },
    complete: function () {
      $h1.text(Math.ceil(this.int));        
    }
  });

工作示例：

这将使用变量

stepCounter

对

step

函数的调用进行计数，并且仅每8次更新一次号码（每

showNthStep

）

---

请注意，如果

步骤

函数没有被调用8次的倍数，则必须使用

完成

函数来最后更新数字1。

您似乎已经回答了您的问题：）是和否-我的方法有效，但不是最佳方法。从性能的角度来看，能够减少对

步骤的调用将是更好的选择，但这正是我不知道该怎么做的。预期的结果是什么？要显示当前
步骤的采样，还是按顺序显示每个步骤的采样？动画的总持续时间仅为
2*1000
。您是否试图在两秒钟内显示每个数字？@guest271314预期的视觉效果将与我下面的答案相同。在引擎盖下，我希望jQuery在2秒钟的动画过程中调用
步骤
的频率要低一些，而不是像通常那样多次调用，我的代码基本上必须“放弃”除第8、16、24、32等之外的每个调用。您的回答解决了问题吗？这篇文章是作为标准的问题/答案吗？看见