Question

我想要实现的是：当设定所需的温度（它应该是一个winecoller模拟器）时，我希望当前的温度上升或下降到所需的温度。（每5分钟-0.2或+ 0.2度）。我尝试做一个while循环，但由于某种原因，它以无限循环结束。

JS

var temperatuur = 7.2;

function openDedeur() {
    temperatuur = temperatuur + 0.9;
    document.getElementById("huidigetemperatuur").value = temperatuur.toFixed(1);
    console.log("U hebt de wijnkoeler geopend, de temperatuur stijgt nu met 0.9º.");

}

function countDown() {
    setInterval(function() {
        temperatuur = temperatuur - 0.2;
        document.getElementById("huidigetemperatuur").value = temperatuur.toFixed(1);
    }, 300000);
}

function test() {
    temperatuur = temperatuur - 0.2;
    console.log("De huidige temperatuur: " + temperatuur);
    document.getElementById("huidigetemperatuur").value = temperatuur.toFixed(1);
    console.log("De motor van de wijnkoeler begint te draaien en zal geleidelijk aan dalen naar de gewenste temperatuur");
    console.log("U heeft als temp:" + handmatigeTemp + " graden ingevoerd.");
}

function zetTemperatuur() {
    var handmatigeTemp = document.getElementById("gewenstetemperatuur").value;
    while (handmatigeTemp < temperatuur) {
        window.setTimeout(test, 3000);
    }
}

while (handmatigeTemp > temperatuur) {
    console.log("De motor van de wijnkoeler begint te draaien en zal geleidelijk aan stijgen naar de gewenste temperatuur");
    console.log("U heeft als temp:" + handmatigeTemp + " graden ingevoerd.");
    temperatuur = temperatuur + 0.2;
    console.log("De huidige temperatuur: " + temperatuur);
    document.getElementById("huidigetemperatuur").value = temperatuur.toFixed(1);
}

if (handmatigeTemp === temperatuur) {
    console.log("Uw Wijnkoeler is op de juiste temperatuur, namelijk " + temperatuur);
}

countDown();

HTML

<button type="button" onclick= "openDedeur();">Open de deur</button>
<br> </br>
<input id ="huidigetemperatuur" type = "text" name="Huidige temperatuur" value="7.2"/>
<p>De huidige temperatuur</p>
<input id ="gewenstetemperatuur" type = "text" name="Gewenste temperatuur"/>
<p> Uw gewenste temperatuur</p>
<button type="button" onclick="zetTemperatuur();"> Zet gewenste temperatuur</button>

Answer 1

使用间隔

setInterval(function(){
    // Code
}, 1000*60*5); // 5 min

修改

while循环将导致浏览器内存耗尽的时间早于第一次间隔运行。您可以将while循环中的代码移动到setInterval回调内部。温度变化后运行检查才有意义。

Answer 2

您需要使用setInterval，通过更改

while (handmatigeTemp < temperatuur) {
  window.setTimeout(test, 3000);
}

向

var myInterval = setInterval(function() {
   if (handmatigTemp < temperatuur) {
      test();
   } else {
      clearInterval(myInterval); // stop the temperature decrease.
   }

}, 3000);

作为替代方案，您可以使用setTimeout函数在3秒后调用自身来重新检查您的条件：

function setToDesiredTemperature(temp) {
   if (temperatuur > temp) {
     temperatuur -= 0.2;
     setTimeout(function() {
       setToDesiredTemperature(temp);
     }, 3000); // Check again in 3 seconds.
   }
}

无限循环p

2 个答案:

修改