Javascript：如何计数到一个特定的数字？

所以我今天在StackOverflow上搜索，我在jquery中找到了几个这样做的项目，但我试图用普通的JS来实现这一点。我对这个有点陌生，不是全新的，但仍在学习。我试图使它的计数从零（0）开始，并计数到一个待确定的数字。实际上，我会让它在一页上计数4次，但到目前为止，我所做的太长了

---

这样就可以计算了，我在网上某个我不记得的地方找到了代码，但是考虑到这个数字太大，花的时间太长了。所以我希望有人能帮我写这段代码，或者给我一个更好的选择。我还试图使它成为事件侦听器的一部分，以便在滚动到视图中之前不会触发它。感谢您的帮助。就像我说的我是新手

问题是步进时间是0.002985ms。。。setInterval跑得没那么快！您应该使用requestAnimationFrame，它每16毫秒触发一次，然后计算每个“帧”中要显示的数字

函数animateValue（id、开始、结束、持续时间）{
var范围=结束-开始；
无功电流=启动；
var obj=document.getElementById（id）；
var starttime；
变量fn=（ms）=>{
让进度=0；
如果（开始时间===未定义）{
开始时间=毫秒；
}否则{
进度=毫秒-开始时间；
如果（进度>=持续时间）{
//“++'+progress+'ms'；”只是显示持续时间，不会在最终代码中使用
当前=end.toLocaleString（）+“”+进度+'ms'；
}否则{
当前=开始+数学下限（进度/持续时间*范围）；
}
}
obj.innerHTML=current.toLocaleString（）；
如果（进度<持续时间）{
请求动画帧（fn）；
}
};
请求动画帧（fn）；
}
animateValue（'value'，0，1004945，3000）
问题在于步进时间为0.002985ms。。。setInterval跑得没那么快！您应该使用requestAnimationFrame，它每16毫秒触发一次，然后计算每个“帧”中要显示的数字


函数animateValue（id、开始、结束、持续时间）{
var范围=结束-开始；
无功电流=启动；
var obj=document.getElementById（id）；
var starttime；
变量fn=（ms）=>{
让进度=0；
如果（开始时间===未定义）{
开始时间=毫秒；
}否则{
进度=毫秒-开始时间；
如果（进度>=持续时间）{
//“++'+progress+'ms'；”只是显示持续时间，不会在最终代码中使用
当前=end.toLocaleString（）+“”+进度+'ms'；
}否则{
当前=开始+数学下限（进度/持续时间*范围）；
}
}
obj.innerHTML=current.toLocaleString（）；
如果（进度<持续时间）{
请求动画帧（fn）；
}
};
请求动画帧（fn）；
}
animateValue（'value'，0，1004945，3000）
在这里，你不会得到一个理想的答案，速度取决于许多因素，包括计算速度和实际数字，但是如果你的例子没有什么变化，你可以使用这种方法

function animateValue(id, start, end, duration) {
  var range = end - start;
  var current = start;
  var increment = end > start ? 1 : -1;
  // you had sort of a bug here, duration is smaller than range
  // so `duration / range < 0`, so rounding with
  // `Math.floor()` was giving 0 in the end
  var stepTime = Math.abs(duration / range);
  var incrementsPerIteration = 1;
  // 4 is for 4ms, time for the minimal `setInterval`
  // incrementsPerIteration - are the number of consecutive
  // additions per iteration 
  if (stepTime < 4) {
    incrementsPerIteration = Math.ceil(4 / stepTime);
  }
  var obj = document.getElementById(id);
  var timer = setInterval(function() {
    for (var i = 0; i < incrementsPerIteration; i++) {
      current += increment;
      obj.innerHTML = current;
      if (current == end) {
        clearInterval(timer);
        break;
      }
    }
  }, stepTime);
}

animateValue('value', 0, 1004945, 3000);

函数animateValue（id、开始、结束、持续时间）{
var范围=结束-开始；
无功电流=启动；
var增量=结束>开始？1:-1；
//这里有一个bug，持续时间小于范围
//所以“持续时间/范围<0”，所以四舍五入
//'Math.floor（）'最后给出了0
var stepTime=数学绝对值（持续时间/范围）；
var incrementsPerIteration=1；
//4表示4ms，表示最小设置间隔时间`
//incrementsPerIteration-是连续的
//每次迭代的加法
如果（步进时间<4）{
incrementsPerIteration=Math.ceil（4/步时间）；
}
var obj=document.getElementById（id）；
var timer=setInterval（函数（）{
对于（变量i=0；i
在这里你不会得到一个理想的答案，速度取决于许多因素，包括计算速度和实际数字，但是如果你的例子没有什么变化，你可以使用这种方法

function animateValue(id, start, end, duration) {
  var range = end - start;
  var current = start;
  var increment = end > start ? 1 : -1;
  // you had sort of a bug here, duration is smaller than range
  // so `duration / range < 0`, so rounding with
  // `Math.floor()` was giving 0 in the end
  var stepTime = Math.abs(duration / range);
  var incrementsPerIteration = 1;
  // 4 is for 4ms, time for the minimal `setInterval`
  // incrementsPerIteration - are the number of consecutive
  // additions per iteration 
  if (stepTime < 4) {
    incrementsPerIteration = Math.ceil(4 / stepTime);
  }
  var obj = document.getElementById(id);
  var timer = setInterval(function() {
    for (var i = 0; i < incrementsPerIteration; i++) {
      current += increment;
      obj.innerHTML = current;
      if (current == end) {
        clearInterval(timer);
        break;
      }
    }
  }, stepTime);
}

animateValue('value', 0, 1004945, 3000);

函数animateValue（id、开始、结束、持续时间）{
var范围=结束-开始；
无功电流=启动；
var增量=结束>开始？1:-1；
//这里有一个bug，持续时间小于范围
//所以“持续时间/范围<0”，所以四舍五入
//'Math.floor（）'最后给出了0
var stepTime=数学绝对值（持续时间/范围）；
var incrementsPerIteration=1；
//4表示4ms，表示最小设置间隔时间`
//incrementsPerIteration-是连续的
//每次迭代的加法
如果（步进时间<4）{
incrementsPerIteration=Math.ceil（4/步时间）；
}
var obj=document.getElementById（id）；
var timer=setInterval（函数（）{
对于（变量i=0；i
注意：我更喜欢Jaromanda的答案

出于覆盖的目的，这里可能有一种方法可以继续使用setInterval。需要注意的是，有许多因素会影响浏览器绘制的计时。下面的方法几乎不起作用。相反，它尝试根据范围和持续时间计算和调整增量。然后，它使用随机
29.5
来补偿其他滞后，但这很可能取决于设备


animateValue(