时间戳

首页 > 解决方案 > Javascript：如何计算到一个特定的数字？

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

问题描述

所以我今天在 StackOverflow 上搜索，我发现了一些在 jquery 中执行此操作的项目，但我正试图在普通的 vanilla JS 中完成此操作。我对此有点陌生，不是全新的，但仍在学习。我正在尝试使其计数从零 (0) 开始并计数到要确定的数字。我实际上要让它在一页上计数 4 次，但到目前为止我所拥有的时间太长了。

https://codepen.io/tony-blackford/pen/wvwYQqx

function animateValue(id, start, end, duration) {
  var range = end - start;
  var current = start;
  var increment = end > start? 1 : -1;
  var stepTime = Math.abs(Math.floor(duration / range));
  var obj = document.getElementById(id);
  var timer = setInterval(function() {
    current += increment;
    obj.innerHTML = current;
    if (current == end) {
      clearInterval(timer);
    }
  }, stepTime);
   }

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

这将进行计数，我在某个我不记得的地方找到了在线代码，但鉴于数字如此之大，它需要的时间太长了。所以我希望有人可以帮助我处理这段代码，或者给我一个更好的选择。我还试图使其成为事件侦听器的一部分，因此它在滚动到视图中之前不会触发。任何帮助表示赞赏。就像我说的那样，我是新手。

标签： javascript

解决方案

问题是步进时间是 0.002985ms ... setInterval 没有运行那么快！你应该做的是使用requestAnimationFrame，它每16ms触发一次，然后计算每个“帧”中要显示的数量

function animateValue(id, start, end, duration) {
    var range = end - start;
    var current = start;
    var obj = document.getElementById(id);
    var starttime;
    var fn = (ms) => {
        let progress = 0;
        if(starttime === undefined) {
            starttime = ms;
        } else {
            progress = ms - starttime;
            if (progress >= duration) {
                // the `+ ' ' + progress + 'ms';` is just to show the duration, wouldn't use that in final code
                current = end.toLocaleString()  + ' ' + progress + 'ms';
            } else {
                current = start + Math.floor(progress/duration * range);
            }
        }
        obj.innerHTML = current.toLocaleString();
        if (progress < duration) {
            requestAnimationFrame(fn);
        }
    };
    requestAnimationFrame(fn);
}
animateValue('value', 0, 1004945, 3000);
<div id="value"></div>

推荐阅读