從同一個函數啓動多個計數器？

Question

我有一段代碼，它使用兩個輸入按鈕來啓動更新許多輸出的功能，包括下面顯示的那些。但是，我希望輸出顯示數字，因爲它們從先前的值循環到更新的數字，並且之前指向setInterval函數 - 是否可以使這項工作適用於多個輸出？

我試圖給我的tempCounters編號來區分，但這似乎並沒有奏效 - 任何幫助都將不勝感激！

HTML

<button onClick = "IncTHR()">Increase Throttle</button> 
<button onClick = "DecTHR()">Decrease Throttle</button> 
<input type="text" id="THR"> 

<div id="CoolantTemp1"></p> 
<div id="CoolantTemp2"></p> 

的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; 
} 

Answer 1

它引發錯誤temp1 is not defined，也有在你的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>應該關閉與</div>，像這樣：

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

觀看演示 ​​- >http://codepen.io/8odoros/pen/bWGOzP