JavaScript整数值动画功能点击按钮不生效问题排查

嘿，我来帮你排查下为什么点击Calculate按钮后看不到动画效果！咱们先从代码里的问题说起：

为啥动画没动静？ #

你的animateValue函数逻辑有两个坑：

1. 超大数值范围导致步长失效：就拿你示例里的start=1000、end=23600191来说，两者差了2300多万，而动画时长只有1秒。计算stepTime = 1000 / 23599191得到的是0，浏览器虽然不会真的用0毫秒间隔，但每次只加1的话，要加到2300多万得花近2分钟，肉眼完全感知不到变化，看起来就像动画没跑起来。
2. 固定步长的方式不适合大数值：每次只+1的逻辑对于小数值还行，但大数值下既低效又不直观，完全体现不出动画的流畅感。

修复后的完整代码 #

我把代码调整了下，不仅解决了动画问题，还加入了对输入框数值的支持（符合你说的实际场景会计算数值的需求）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id="contact" action="" method="post">
  <fieldset>
    <font class="label">How many people do you want to save per month? </font>
    <input placeholder="" id="active-member" type="text" style="width:110px;float: right;"/>
  </fieldset>
  <fieldset>
    <button name="submit" type="button" id="contact-submit" onclick="myCalculator();" style="float: right;">Calculate</button>
  </fieldset>
</form>
<div class="container2" style="display:none;">
  Animating Value <span id="value" ></span>
</div>
<script>
function myCalculator() {
  $(".container2").show();
  // 拿到输入框的数值，这里做了简单的容错处理，空值或者非数字就按0算
  var inputVal = parseInt(document.getElementById('active-member').value) || 0;
  // 示例：根据输入值计算目标值，你可以替换成自己的业务计算逻辑
  var start = 1000;
  var end = 1000 + inputVal * 10000; 
  // 用2000ms也就是2秒作为动画时长，符合你的要求
  animateValue("value", start, end, 2000);
}

function animateValue(id, start, end, duration) {
  var obj = document.getElementById(id);
  if (!obj) return; // 防止找不到元素报错
  
  var startTimestamp = null;
  // 用requestAnimationFrame做动画，比setInterval流畅多了，浏览器专门优化过
  var step = function(timestamp) {
    if (!startTimestamp) startTimestamp = timestamp;
    // 算一下已经过了多久，占总时长的比例
    var progress = Math.min((timestamp - startTimestamp) / duration, 1);
    // 根据进度算当前数值，用Math.round保证是整数
    var current = Math.round(start + progress * (end - start));
    obj.innerHTML = current;
    // 没完成就继续跑动画
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
}
</script>

改了啥？ #

• 换成requestAnimationFrame：这玩意儿是浏览器专门为动画设计的，能跟着浏览器的刷新节奏走，动画更流畅还不卡。
• 按时间进度算数值：不管数值差多大，都能在你指定的时长内从start顺滑跑到end，再也不会出现“看起来没动画”的情况。
• 支持输入框数值：现在点击按钮会读取输入框的数值来计算目标值，你可以把end的计算逻辑换成自己的业务规则。
• 加了容错处理：防止找不到元素的时候报错，代码更健壮。

额外小建议 #

• 可以给数值加千分位，比如把obj.innerHTML = current;改成obj.innerHTML = current.toLocaleString();，大数值看起来更舒服。
• 如果担心用户多次点击按钮导致动画冲突，可以在animateValue开头先取消之前的动画请求，比如用一个变量存requestAnimationFrame的ID，每次调用先cancelAnimationFrame。

内容的提问来源于stack exchange，提问作者Jasbir