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);

}