代码之家 › 专栏 › 技术社区 › Vikas NS

javascript:clearInterval();不工作

html javascript

Vikas NS · 技术社区 · 7 年前

在这个程序中,我接收一个日期和时间,并从当前时间和日期开始每秒钟计数,一旦用户的日期和时间到达,就会显示“我们到达”。

但问题是,一旦达到该时间,即使我清除了间隔,函数仍会继续执行。

我发现许多题目相同的问题,但似乎没有一个能解决我的问题。

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>

1 回复 | 直到 7 年前

t.niese 7 年前

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

但这不能解释你的评论:

当我运行这个问题时,一旦达到给定的时间,我就能看到“我们到达了那里”,理论上,它应该停止(即不再计数)。但计数仍在继续。你能查一下密码吗?

只有单击 Submit 两次,输入字段的值不同。因为如果你点击 提交 然后创建一个额外的间隔,但当前正在运行的间隔不会被清除,因为 add 属于 incrementCount 是的。

所以如果你点击 提交 ad意识到时间到方式是过去的或无效的,您更新了输入的值并单击 提交 再说一遍,你至少有一段时间不会停止计数。

解决你需要搬家的问题 添加 超出范围 递增计数 并打电话 clearInterval(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>