如何同步一些计数器都以相同的速率增加并以不同的值结束答案

【问题标题】：How to synchronize some counters all increasing at the same rate and ending at different values如何同步一些计数器都以相同的速率增加并以不同的值结束
【发布时间】：2021-09-24 10:48:55
【问题描述】：

我在 HTML 文档中从 0 开始有 4 个 span 元素，我想将它们的值增加 1 直到它们达到标记值。

即使值不同，它们也应该同时结束。

这是我正在使用的函数，item 参数是span，number 是我想停止增加值的数字。

let animateNumberInItem = (number,item) =>{
  let startingNum = 0;
  let animationSpeed = 0;

  
  let interval = setInterval(()=>{
    if(startingNum === number-1){
      clearInterval(interval);
    }
    startingNum++;
    item.innerHTML = startingNum;
  },animationSpeed);
};

知道如何使用 number 值计算达到该数字所需的时间（以毫秒为单位）吗？

另一种解决方案可能是更改它们增加的数量或/和使它们同时结束的时间。

【问题讨论】：

标签： javascript html dom time

【解决方案1】：

如果你根据目标数字出现的比例增加startingNum，那么它们将同时到达目标。

let animateNumberInItem = (number,item, ratio) =>{
  let startingNum = 0;
  let animationSpeed = 30;
  
  let interval = setInterval(()=>{
    if(startingNum >= number){
      clearInterval(interval);
    } else {
      // Increase the startingNum based on the ratio in which target number is present
       startingNum += ratio;
      item.innerHTML = Math.round(startingNum);
    }
   
  },animationSpeed);
};

// e.g. first element has to reach target of 201 and second element has to reach target of 100
const ratio = 100/201;
animateNumberInItem(201, document.getElementById('first'), 1);
animateNumberInItem(100, document.getElementById('second'), ratio);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <span id="first">0</span>
  <span id="second">0</span>
</body>
</html>

【讨论】：

不是我要的，我想为每个计数器找到一个时间数值，使它们同时达到最大值，不知道执行时间。
@Gabri 应使用目标数字的比率，以便它们中的每一个同时达到最高值。我已经修改了答案。
顺便说一句，你的答案只是我的一个副本
@Gabri 是的。唯一的区别是必须增加多少startingNum。我认为数字之间的比率可以用来控制startingNum 的增加量。无论如何，如果添加任意animationGrowNumber 可以解决您的问题，那就没问题了。

【解决方案2】：

我刚刚找到了解决方案，它比看起来更容易。

这是编辑后的函数：

let animateNumberInItem = (number,item) =>{
  let startingNum = 0;
  let animationSpeed = 30;
  let animationGrowNumber = number / 100;
  
  let interval = setInterval(()=>{
    if(startingNum >= number- animationGrowNumber){
      clearInterval(interval);
    }
    startingNum+=animationGrowNumber;
    item.innerHTML = Math.round(startingNum);
  },animationSpeed);
};

您只需将数字除以一个值（我使用 100，因为它可以提供更平滑的动画），然后将其设置为递增值。

不会加1，但动画效果还是不错的，你也可以设置你想要的时间，因为它不影响最终结果，只影响动画的出现。

【讨论】：

在上述函数中，添加animationGrowNumber 将需要在上边界条件下进行特殊情况处理。例如animateNumberInItem(201, item); 会将目标计数器带到 203，这是不正确的。
上边界溢出在setInterval方法下被保护，效果很好。