如何停止正在运行的倒数计时器？答案

【问题标题】：How to stop a running countdown timer?如何停止正在运行的倒数计时器？
【发布时间】：2020-04-11 23:07:17
【问题描述】：

我有一个文本框和一个按钮。按下它将根据文本框值计算剩余时间。

例如，对于 3600（=秒）的值，它将计算剩余时间：0 天 0 小时 59 分 59 秒。

第一次运行计时器效果很好，但我需要它重置并从第二次按下按钮再次计算时间 - 它运行不正常。如何停止计时器并再次运行它以获取新的输入值？基于 w3schhol 示例和另一个 web 示例的代码（您可以测试它）：

 // Set the date we're counting down to

    function setTimer()
    {

    var timeSpan = convert();
    //var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();
    var countDownDate = new Date(timeSpan).getTime();

    // Update the count down every 1 second
    var x = setInterval(function() 
    {
 
  
      // Get today's date and time
      var now = new Date().getTime();
    
      // Find the distance between now and the count down date
      var distance = countDownDate - now;
    
      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
      // Output the result in an element with id="demo"
      document.getElementById("demo").innerHTML = days + "d " + hours + "h "
      + minutes + "m " + seconds + "s ";
    
      // If the count down is over, write some text 
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
          }
        }, 1000);


    }

    function convert()
    {
    var now = new Date()  
    var secondsSinceEpoch = Math.round(now.getTime() / 1000)  

     // Unixtimestamp
     var unixtimestamp = document.getElementById('timestamp').value;
     unixtimestamp = parseInt(unixtimestamp);
     secondsSinceEpoch = parseInt(secondsSinceEpoch);
     unixtimestamp = unixtimestamp +  secondsSinceEpoch;
     // Months array
     var months_arr = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

     // Convert timestamp to milliseconds
     var date = new Date(unixtimestamp*1000);

     // Year
     var year = date.getFullYear();

     // Month
     var month = months_arr[date.getMonth()];

     // Day
     var day = date.getDate();

     // Hours
     var hours = date.getHours();

     // Minutes
     var minutes = "0" + date.getMinutes();

    // Seconds
     var seconds = "0" + date.getSeconds();

     // Display date time in MM-dd-yyyy h:m:s format
     var convdataTime = month+' '+day+', '+year+' '+hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
     //"Jan 5, 2021 15:37:25"
     document.getElementById('datetime').innerHTML = convdataTime;
     return convdataTime;
    }

 <!DOCTYPE HTML>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    p {
      text-align: center;
      font-size: 60px;
      margin-top: 0px;
    }
    </style>
    </head>
    <body>
    <input type='text' value='1490028077' id='timestamp'>&nbsp;
    <input type='button' id='convert' value='Convert' onclick='setTimer()'>

    <br><br>
    <span id='datetime'></span>
    <p id="demo"></p>

    </body>
    </html>

我尝试放置一个计数器变量，并在变量 == 2 时调用 return（从

var x = setInterval(function()

) 但是没用……

这是一个例子：

【问题讨论】：

可以运行代码看看问题
这能回答你的问题吗？ How do I clear this setInterval inside a function?
在你的 setTimer 函数之外声明 var x ，而不是 var x = setInterval.. 只是做 x = setInterval ... 。基本上发生的情况是，当您尝试 clearInterval 时，x 可能不再是同一个属性，因为您已经在函数中声明了。

标签： javascript html setinterval

【解决方案1】：

var interval;
function setTimer()
    {

clearInterval(interval)

    var timeSpan = convert();
    //var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();
    var countDownDate = new Date(timeSpan).getTime();

    // Update the count down every 1 second
    interval = setInterval(function() 
    {
 
  
      // Get today's date and time
      var now = new Date().getTime();
    
      // Find the distance between now and the count down date
      var distance = countDownDate - now;
    
      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
      // Output the result in an element with id="demo"
      document.getElementById("demo").innerHTML = days + "d " + hours + "h "
      + minutes + "m " + seconds + "s ";
    
      // If the count down is over, write some text 
      if (distance < 0) {
        clearInterval(interval);
        document.getElementById("demo").innerHTML = "EXPIRED";
          }
        }, 1000);


    }

    function convert()
    {
    var now = new Date()  
    var secondsSinceEpoch = Math.round(now.getTime() / 1000)  

     // Unixtimestamp
     var unixtimestamp = document.getElementById('timestamp').value;
     unixtimestamp = parseInt(unixtimestamp);
     secondsSinceEpoch = parseInt(secondsSinceEpoch);
     unixtimestamp = unixtimestamp +  secondsSinceEpoch;
     // Months array
     var months_arr = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

     // Convert timestamp to milliseconds
     var date = new Date(unixtimestamp*1000);

     // Year
     var year = date.getFullYear();

     // Month
     var month = months_arr[date.getMonth()];

     // Day
     var day = date.getDate();

     // Hours
     var hours = date.getHours();

     // Minutes
     var minutes = "0" + date.getMinutes();

    // Seconds
     var seconds = "0" + date.getSeconds();

     // Display date time in MM-dd-yyyy h:m:s format
     var convdataTime = month+' '+day+', '+year+' '+hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
     //"Jan 5, 2021 15:37:25"
     document.getElementById('datetime').innerHTML = convdataTime;
     return convdataTime;
    }

<!DOCTYPE HTML>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    p {
      text-align: center;
      font-size: 60px;
      margin-top: 0px;
    }
    </style>
    </head>
    <body>
    <input type='text' value='1490028077' id='timestamp'>&nbsp;
    <input type='button' id='convert' value='Convert' onclick='setTimer()'>

    <br><br>
    <span id='datetime'></span>
    <p id="demo"></p>

    </body>
    </html>

【讨论】：

clearInterval(interval);在 counter end 仍为 clearInterval(x) 时的代码中；那东西被编辑了。

【解决方案2】：

这是基于类的方法的示例（因此您不需要全局变量）；

class Timer {
  constructor(logTicks = false) {
    this.interval = null;
    this.logTicks = logTicks;
  }
  start() {
    this.interval = setInterval( () => {
      if (this.logTicks) { console.log('Tick'); }
    }, 1000);
  }
  stop() {
    if (this.interval) { clearInterval(this.interval); }
  }
}


// Usage
const timer = new Timer(true);
timer.start();

setTimeout( () => { timer.stop(); }, 10000);

【讨论】：