Javascript 设置递增到另一个数字的确切持续时间

我做了一个函数，将一个数递增到另一个数。这是可行的，但我的持续时间逻辑不可行

.animateEnumber（）

中的第三个参数是持续时间，我希望这是增加到新数字所花费的时间

因此，如果将持续时间设置为500，则从10（开始）-500（结束）开始递增需要500毫秒，这对于任何开始和结束值都是相同的

HTMLElement.prototype.animateEnumber=函数（开始、结束、持续时间）{
this.style.opacity=0.5；
var self=这个，
范围=结束-开始，
电流=启动，
增量=结束>开始？1:-1，
步长时间=持续时间/范围，
计时器=设置间隔（函数（）{
电流+=增量；
self.innerHTML=当前；
如果（当前==结束）{
self.style.opacity=1；
清除间隔（计时器）；
}
}，步进时间）；
控制台日志（范围）；
控制台日志（stepTime）；
};
document.querySelector（'.value'）.animateNumber（400500,20）；
document.querySelector（'.value1'）.animateNumber（0500,20）
0
0
我只需要请求新帧，然后将数字更新为当时的适当分数：


函数动画枚举器（el、开始、结束、持续时间）{
var startTime=performance.now（）；
（函数func（）{
var factor=Math.min（1，（performance.now（）-startTime）/duration）；
el.textContent=（开始+（结束-开始）*因子）.toFixed（0）；
el.style.opacity=系数；
如果（因子<1）请求动画帧（func）；
})();
}
animateEnumber（document.querySelector（'.value1'）、4005002000）；
animateEnumber（document.querySelector（'.value2'），05002000）
0
0
我只需要请求新帧，然后将数字更新为当时的适当分数：


函数动画枚举器（el、开始、结束、持续时间）{
var startTime=performance.now（）；
（函数func（）{
var factor=Math.min（1，（performance.now（）-startTime）/duration）；
el.textContent=（开始+（结束-开始）*因子）.toFixed（0）；
el.style.opacity=系数；
如果（因子<1）请求动画帧（func）；
})();
}
animateEnumber（document.querySelector（'.value1'）、4005002000）；
animateEnumber（document.querySelector（'.value2'），05002000）
0
0
这是通过向函数添加刷新率来实现的方法：


HTMLElement.prototype.animateEnumber=函数（开始、结束、持续时间、刷新）{
this.style.opacity=0.5；
var self=这个，
刷新=刷新| | 10，
范围=结束-开始，
stepQt=持续时间/刷新| 0，
增量=结束>开始？范围/步距：-范围/步距，
电流=启动；
var timer=setInterval（函数（）{
电流+=增量；
如果（当前>=结束）{
电流=结束；
self.style.opacity=1；
清除间隔（计时器）；
}
self.innerHTML=当前| 0；
}，刷新）；
};
document.querySelector（'.value'）.animateNumber（4005002000）；
document.querySelector（'.value1'）.animateNumber（0500200010）
0
0
这是通过向函数添加刷新率来实现的方法：


HTMLElement.prototype.animateEnumber=函数（开始、结束、持续时间、刷新）{
this.style.opacity=0.5；
var self=这个，
刷新=刷新| | 10，
范围=结束-开始，
stepQt=持续时间/刷新| 0，
增量=结束>开始？范围/步距：-范围/步距，
电流=启动；
var timer=setInterval（函数（）{
电流+=增量；
如果（当前>=结束）{
电流=结束；
self.style.opacity=1；
清除间隔（计时器）；
}
self.innerHTML=当前| 0；
}，刷新）；
};
document.querySelector（'.value'）.animateNumber（4005002000）；
document.querySelector（'.value1'）.animateNumber（0500200010）
0
0
这不是setTimeout的工作方式。它将在特定的时间点注册事件。您应该了解这不是setTimeout的工作方式。它将在特定的时间点注册事件。你应该调查一下