JavaScript:clearInterval()；不工作

Question

在此程序中，我收到一个日期和时间，并从当前时间和日期开始计算每秒，并在达到用户日期和时间后显示“我们已到达”。

但问题是，一旦达到该时间，即使我清除了间隔，该函数仍然保持执行。

我发现了许多具有相同标题的问题，但似乎没有一个能解决我的问题。

function incrementCount() {
  var time = document.getElementById("time").value;
  var date = document.getElementById("date").value;
  document.getElementById("target").innerText = "Target " + date.toString() + "  " + time.toString();
  var time = time.split(":");
  var date = date.split("-");
  var sec_t = time[2];
  var min_t = time[1];
  var hour_t = time[0];
  var day_t = date[2];
  var month_t = date[1];
  var year_t = date[0];
  var add = setInterval(
    function() {
      var today = new Date();
      var sec_c = today.getSeconds();
      var min_c = today.getMinutes();
      var hour_c = today.getHours();
      var day_c = today.getDate();
      var month_c = today.getMonth() + 1;
      var year_c = today.getFullYear();

      var display_str = "";

      //if(parseInt(year)==parseInt(year_t) && parseInt(month)==parseInt(month_t) && parseInt(day)==parseInt(day_t) && parseInt(hour) == parseInt(hour_t) && parseInt(min_t) == parseInt(time[1]) && parseInt(sec_t) == parseInt(time[2]))
      if (parseInt(year_t) == parseInt(year_c) &&
        parseInt(month_t) == parseInt(month_c) &&
        parseInt(day_t) == parseInt(day_c) &&
        parseInt(hour_t) == parseInt(hour_c) &&
        parseInt(min_t) == parseInt(min_c) &&
        parseInt(sec_t) == parseInt(sec_c)) {
        document.getElementById("current").innerText = "We Reached There";
        clearInterval(add);

      } else {
        display_str = year_c.toString() + "-" + month_c.toString() + "-" + day_c.toString() + " " + hour_c.toString() + ":" + min_c.toString() + ":" + sec_c.toString();
        document.getElementById("current").innerText = "Current " + display_str
      }

    }, 1000);
}

<img src="https://media.giphy.com/media/2vq8w7WI0oMBuDQULT/giphy.gif">
<br><br>
<form>
  <label>Date</label>
  <input type="Date" id="date">
  <br><br>
  <label>Time</label>
  <input type="time" id="time" value="16:50:30">
</form>
<br><br>
<input type="Submit" onclick="incrementCount()">
<br><br>
<span id="target">Please select time</span>
<br><br>
<span id="current"></span>

Answer 1

有两个潜在的问题，setInterval( ... ,1000) 会尝试每 1000 毫秒调用一次回调函数，但延迟可能会更大，所以你可能会错过一秒钟。

但这并不能解释你的评论:

When I run the problem, once the given time is reached, I'm able to see "We reached there" and in theory, it should stop (ie no more counting). But counting still continues. Could you please run the code?

只有当您使用不同的输入字段值单击提交两次时，才会发生这种情况。因为如果您点击Submit，则会创建一个附加的Interval，但当前正在运行的Interval不会被清除，因为add在incrementCount<的范围内.

因此，如果您点击提交广告，意识到到达时间已经过去或无效，并且您更新了输入值并再次点击提交，那么你至少有一个不会再停止计数的间隔。

要解决这个问题，您需要将 add 移出 incrementCount 的范围，并在创建新间隔之前调用 clearInterval(add) 。我将代码移动到 IIFE 中，以便 add 不会污染全局范围，并使用 addEventListener。

(function() {
  var add

  document.getElementById('submit').addEventListener('click', function() {
    incrementCount()
  }, false)

  function incrementCount() {
    // clear old interval
    clearInterval(add)

    var time = document.getElementById("time").value;
    var date = document.getElementById("date").value;
    document.getElementById("target").innerText = "Target " + date.toString() + "  " + time.toString();
    var time = time.split(":");
    var date = date.split("-");
    var sec_t = time[2];
    var min_t = time[1];
    var hour_t = time[0];
    var day_t = date[2];
    var month_t = date[1];
    var year_t = date[0];
    add = setInterval(
      function() {
        var today = new Date();
        var sec_c = today.getSeconds();
        var min_c = today.getMinutes();
        var hour_c = today.getHours();
        var day_c = today.getDate();
        var month_c = today.getMonth() + 1;
        var year_c = today.getFullYear();

        var display_str = "";

        //if(parseInt(year)==parseInt(year_t) && parseInt(month)==parseInt(month_t) && parseInt(day)==parseInt(day_t) && parseInt(hour) == parseInt(hour_t) && parseInt(min_t) == parseInt(time[1]) && parseInt(sec_t) == parseInt(time[2]))
        if (parseInt(year_t) == parseInt(year_c) &&
          parseInt(month_t) == parseInt(month_c) &&
          parseInt(day_t) == parseInt(day_c) &&
          parseInt(hour_t) == parseInt(hour_c) &&
          parseInt(min_t) == parseInt(min_c) &&
          parseInt(sec_t) == parseInt(sec_c)) {
          document.getElementById("current").innerText = "We Reached There";
          clearInterval(add);

        } else {
          display_str = year_c.toString() + "-" + month_c.toString() + "-" + day_c.toString() + " " + hour_c.toString() + ":" + min_c.toString() + ":" + sec_c.toString();
          document.getElementById("current").innerText = "Current " + display_str
        }

      }, 1000);
  }
})()

<img src="https://media.giphy.com/media/2vq8w7WI0oMBuDQULT/giphy.gif">
<br><br>
<form>
  <label>Date</label>
  <input type="Date" id="date">
  <br><br>
  <label>Time</label>
  <input type="time" id="time" value="16:50:30">
</form>
<br><br>
<input type="Submit" id="submit">
<br><br>
<span id="target">Please select time</span>
<br><br>
<span id="current"></span>