JavaScript: clearInterval (); не работает

Там две потенциальные проблемы, setInterval( ... ,1000) попытается вызвать функцию обратного вызова каждые 1000 миллисекунды, но это может быть больше, поэтому вы можете пропустить секунду.

t объясните свой комментарий:

Когда я запускаю проблему, как только это время будет достигнуто, я смогу увидеть «Мы добрались туда», и теоретически она должна прекратиться (т.е. не больше подсчет). Но подсчет продолжается. Не могли бы вы запустить код?

Это может произойти только в том случае, если вы дважды щелкните Submit с разными значениями для полей ввода. Поскольку, если вы нажмете Submit, тогда будет создан дополнительный интервал, но текущий текущий не будет очищен, потому что add находится в области incrementCount.

Итак, если вы нажмете Submit ad понять, что время до пути либо в прошлом, либо недействительно, и вы обновили значения для ввода и снова щелкнули Submit, тогда у вас есть хотя бы один интервал, который больше не перестанет считать.

Чтобы решить проблему, вам нужно переместить 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>