Javascript 从同一函数启动多个计数器？

我有一段代码，它使用两个输入按钮来启动函数，更新许多输出，包括下面所示的输出。但是，我希望输出显示数字，因为它们从以前的值循环到更新后的值，并且以前指向setInterval函数-是否有可能对多个输出执行此操作

我试着给我的临时计数器编号以区分，但这似乎不起作用-任何帮助都将不胜感激

html

加大油门
减小油门

javascript

var CoolantTemp1 = 366;
var tempCounter1 = 366;
var CoolantTemp2 = 250;
var tempCounter2 = 250;
var Throttle = 5;
var ControlRodHeight = 50;
var PrimaryPump = 1;

function IncTHR(){
Throttle++;
if (Throttle > 10){
    Throttle = 10;
}
CoolantTemp1 = (220+(ControlRodHeight*2.2)+(PrimaryPump*20)+(Throttle*3.2));
update();

var incInt = setInterval(function() {
    if (tempCounter1 < CoolantTemp1){
        displayResults(tempCounter1);
        tempCounter1++;
    } else {
        displayResults(CoolantTemp1);
        tempCounter1 = CoolantTemp1;
        clearInterval(incInt);
    }
}, 500);

CoolantTemp2 = (190+(ControlRodHeight*2.2)+(PrimaryPump*22)-(Throttle*2.9));

var incInt = setInterval(function() {
    if (tempCounter2 < CoolantTemp2){
        displayResults(tempCounter2);
        tempCounter++;
    } else {
        displayResults(CoolantTemp2);
        tempCounter2 = CoolantTemp2;
        clearInterval(incInt);
    }
}, 500);
}

function DecTHR(){
Throttle--;
if (Throttle < 0){
    Throttle = 0;
}
CoolantTemp1 = (220+(ControlRodHeight*2.2)+(PrimaryPump*20)+(Throttle*3.2));
update();

var decInt = setInterval(function() {
    if (tempCounter1 > CoolantTemp1){
        displayResults(tempCounter);
        tempCounter--;
    } else {
        displayResults(CoolantTemp1);
        tempCounter1 = CoolantTemp1;
        clearInterval(decInt);
    }
}, 500);

CoolantTemp2 = (190+(ControlRodHeight*2.2)+(PrimaryPump*22)-(Throttle*2.9));

var decInt = setInterval(function() {
    if (tempCounter2 > CoolantTemp2){
        displayResults(tempCounter2);
        tempCounter--;
    } else {
        displayResults(CoolantTemp2);
        tempCounter2 = CoolantTemp2;
        clearInterval(decInt);
    }
}, 500);
}


function update() {
document.getElementById("THR").value = Throttle;
}

function displayResults(temp) {
document.getElementById("CoolantTemp1").innerHTML = "Coolant Temperature 1 is " + temp1;
document.getElementById("CoolantTemp2").innerHTML = "Coolant Temperature 2 is " + temp2;
}

var CoolantTemp1=366；
var tempCounter1=366；
var CoolantTemp2=250；
var-2=250；
var节流阀=5；
var ControlRodHeight=50；
var一次泵=1；
函数IncTHR（）{
油门++；
如果（节气门>10）{
节流阀=10；
}
CoolantTemp1=（220+（控制棒高度*2.2）+（主泵*20）+（节气门*3.2））；
更新（）；
var incent=setInterval（函数（）{
if（温度计数器1CoolantTemp1）{
显示结果（临时计数器）；
临时计数器--；
}否则{
显示结果（CoolantTemp1）；
tempCounter1=冷却液temp1；
净间隔（分贝）；
}
}, 500);
CoolantTemp2=（190+（控制棒高度*2.2）+（主泵*22）-（节气门*2.9））；
var decInt=setInterval（函数（）{
如果（tempCounter2>CoolantTemp2）{
显示结果（2）；
临时计数器--；
}否则{
显示结果（CoolantTemp2）；
tempCounter2=冷却液temp2；
净间隔（分贝）；
}
}, 500);
}
函数更新（）{
document.getElementById（“THR”）.value=Throttle；
}
函数显示结果（临时）{
document.getElementById（“CoolantTemp1”）.innerHTML=“冷却液温度1为”+temp1；
document.getElementById（“CoolantTemp2”）.innerHTML=“冷却液温度2为”+temp2；
}

它抛出错误

temp1未定义

，并且html中没有

CoolantTemp2

元素。因此，您必须替换此：

  document.getElementById("CoolantTemp1").innerHTML = "Coolant Temperature 1 is " + temp1;
  document.getElementById("CoolantTemp2").innerHTML = "Coolant Temperature 2 is " + temp2;

为此：

  document.getElementById("CoolantTemp1").innerHTML = "Coolant Temperature 1 is " + CoolantTemp1;
  document.getElementById("CoolantTemper2").innerHTML = "Coolant Temperature 2 is " + CoolantTemp2;

此外，每个

都应使用

关闭，如下所示：

<div id="CoolantTemp1"></div>
<div id="CoolantTemper2"></div>#

#

---

请参见演示-->

您对

decInt

和

incInt

有重复声明。此外，在函数

DecTHR

中，

tempCounter

未定义。我建议您创建另一个函数，以便您可以传入要更新的参数。例如，设置

CoolantTemp1

和

CoolantTemp2

将是一个函数调用，以确定它的值。一旦你有了一个可用的代码库（但感觉可以大大改进），就可以去那里寻求重构建议。但是，建议您首先尽可能地自己重构它。试着理解为什么您可能需要这样做，即可读性、性能等。谢谢Matt-因此按下油门按钮将调用一个函数来计算“CoolantTemp1”，并调用上面示例中涉及计数器的函数？嗨，Theodore，感谢您的回答，但不幸的是，当我运行此命令时，它似乎只更新CoolantTemp1输出？对于所有的输入错误，我深表歉意！谢谢你指出它们。很抱歉问另一个问题，但是现在它运行并给我输出，非常好，谢谢，但似乎已经失去了我最初想要的计数器功能？因此，现在我的答案会自动更新到最终的解决方案，而不是一路上显示中间的整数值。

<div id="CoolantTemp1"></div>
<div id="CoolantTemper2"></div>#