如何延长更新间隔或减少jQuery的.animate()方法的步数？

Posted 2023-05-08

【中文标题】如何延长更新间隔或减少jQuery的.animate()方法的步数？

【英文标题】：How to lengthen the update interval or reduce the number of steps of jQuery's .animate() method?

【发布时间】：2017-08-02 06:36:54

【问题描述】：

使用 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));
    
  );

工作示例：http://codepen.io/troywarr/pen/NpjyJE?editors=1010#0

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

jQuery 似乎没有直接控制动画中的步数，也没有提供更新间隔；它似乎只接受接收插值的step function。

有没有办法调整 jQuery 用于在动画持续时间内插入动画的步数？

【问题讨论】：

你似乎已经回答了你的问题:)

是和否 - 我的方法有效，但不是最佳的。从性能的角度来看，能够减少对step 的调用会更好，但这就是我不知道该怎么做。

预期结果是什么？要显示当前step 的采样，还是按顺序显示每个步骤？动画的总duration只有2 * 1000。您是否尝试将每个数字显示两秒钟？

@guest271314 预期的视觉结果将与我在下面的答案相同。在幕后，我希望 jQuery 在 2 秒动画的过程中减少调用 step 的频率，而不是像通常那样多次调用它，并且我的代码必须基本上“丢弃”除第 8 次调用之外的每个调用、16 日、24 日、32 日等

你的答案能解决问题吗？帖子是否旨在作为规范的问题/答案？见Can I answer my own question?、What is a canonical question/answer, and what is their purpose?

【参考方案1】：

这是我用来模拟这种情况的一种方法，它对于日常用途来说可能已经足够好用了。但是，从性能的角度来看，这并不理想，因为 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));        
    
  );

工作示例：http://codepen.io/troywarr/pen/NpjYWo?editors=1010#0

这使用变量stepCounter 来计算对step 函数的调用，并且仅每8 次更新一次数字（根据showNthStep）。

请注意，如果 step 函数未被调用 8 次的倍数，则需要 complete 函数最后一次更新第一个。

【参考方案2】：

只需在你的代码前面使用

jQuery.fx.interval = 1000;

默认为 13 毫秒 但缺点是所有 JQuery 动画的全局设置。