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() {
    clearInterval(x);
    var until_date = new Date(document.getElementById("input_date").value).getTime();
    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);

}