Javascript 中的倒计时器在输入新数据后也会显示旧数据

Question

所以我在这里用 HTML 和 Javascript 编写一个倒计时器。但我对此有疑问。看起来它不会“忘记”旧的输入数据，并且在我单击“计算”按钮后几乎同时显示旧的和新的数据。

我的代码似乎有效，但问题是，当我输入新日期时，它会同时显示旧计时器和新计时器。例如，如果我输入 2020 年 12 月 7 日，它将显示 1 天（一些分钟和秒，等等），之后如果我在每秒内输入 2020 年 12 月 8 日，它会显示 2 天，然后突然变为 1 天，然后更改到 2 天等。如果我输入另一个日期，它将快速显示所有三个计时器。我该如何解决？我认为旧的信息被留下了，我尝试添加一个声明来清除“res”部分，但它仍然是相同的。我不知道是什么原因。

function calculate() {

  var until_date = new Date(document.getElementById("input_date").value).getTime();

  var x = setInterval(function() {

    var today = new Date().getTime();

    var d = until_date - today;

    var days = Math.floor(d / (1000 * 60 * 60 * 24));

    var hr = Math.floor((d % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

    var min = Math.floor((d % (1000 * 60 * 60)) / (1000 * 60));

    var sec = Math.floor((d % (1000 * 60)) / 1000);

    document.getElementById("res").innerHTML = days + "d " + hr + "h " + min + "m " + sec + "s ";

    if (d < 0) {

      clearInterval(x);

      document.getElementById("res").innerHTML = "DONE";

    }

  }, 1000);

}

<p>Please select a date: <input id="input_date" type="date"></p>

<button id='calulate' onclick="calculate()">Calculate</button>

<p id="res"></p>

Answer 1

只需将区间变量放在函数外部，并在循环外再次调用该函数时清除区间即可。否则，每个函数调用都会创建一个新的间隔，该间隔将与前一个间隔并行运行。var x;function calculate() {&nbsp; &nbsp; clearInterval(x);&nbsp; &nbsp; var until_date = new Date(document.getElementById("input_date").value).getTime();&nbsp; &nbsp; x = setInterval(function () {&nbsp; &nbsp; &nbsp; &nbsp; var today = new Date().getTime();&nbsp; &nbsp; &nbsp; &nbsp; var d = until_date - today;&nbsp; &nbsp; &nbsp; &nbsp; var days = Math.floor(d / (1000 * 60 * 60 * 24));&nbsp; &nbsp; &nbsp; &nbsp; var hr = Math.floor((d % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));&nbsp; &nbsp; &nbsp; &nbsp; var min = Math.floor((d % (1000 * 60 * 60)) / (1000 * 60));&nbsp; &nbsp; &nbsp; &nbsp; var sec = Math.floor((d % (1000 * 60)) / 1000);&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("res").innerHTML = days + "d " + hr + "h " + min + "m " + sec + "s ";&nbsp; &nbsp; &nbsp; &nbsp; if (d < 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(x);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("res").innerHTML = "DONE";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, 1000);}