单击按钮时如何递归地停止函数超时

Question

我正在 JavaScript 上构建一个简单的数字时钟，并实现了 12 小时格式时钟，如下所示：

function get12hrTime()
{
      
      var date=new Date();
      var hh=date.getHours();
      var mm=date.getMinutes();
      var ss=date.getSeconds();
      var session="AM";
      if(hh==0)
      {
            hh=12;
      }
      if(hh>12)
      {
            hh=hh-12;
            session = "PM";
      }
      hh=(hh<10)? "0" + hh : hh;
      mm=(mm<10)? "0" + mm : mm;
      ss=(ss<10)? "0" + ss : ss;

      let time = hh + "." + mm + "." + ss + " "+session;
      document.getElementById("time").innerHTML = time;
      let t1=setTimeout(function(){
            get12hrTime()
      },1000);
}

我通过 onclick 函数调用它。现在我正在尝试实现 24 小时格式的格式切换器：

function get24hrTime()
{
      
      var date=new Date();
      var hh=date.getHours();
      var mm=date.getMinutes();
      var ss=date.getSeconds();
      var session="AM";
      
      if(hh>12)
      {
            session = "PM";
      }
      hh=(hh<10)? "0" + hh : hh;
      mm=(mm<10)? "0" + mm : mm;
      ss=(ss<10)? "0" + ss : ss;

      let time = hh + "." + mm + "." + ss + " "+session;
      document.getElementById("time").innerHTML = time;
      let t2=setTimeout(function(){
            get24hrTime()
      },1000);
}

问题是超时不同步，如果我在获得 12 小时时间后使用切换器，时间会不断在 12 小时和 24 小时之间切换。

我尝试使用clearTimeout，但找不到方法。我总是可以使用 2 个按钮来表示 12 小时和 24 小时，但我想要一个切换器。有没有办法阻止24小时函数中其他函数的超时？

Answer 1

如果

t1

和

t2

变量处于更高的范围内，则两个函数都可以访问它们并清除它们。例如：

let t1;
let t2;

function get12hrTime() {
  //...

  if (t2) {
    clearTimeout(t2);
  }
  t1 = setTimeout(function() {
    get12hrTime()
  }, 1000);
}

function get24hrTime() {
  //...

  if (t1) {
    clearTimeout(t1);
  }
  t2 = setTimeout(function() {
    get24hrTime()
  }, 1000);
}

这样，每个“时钟”在设置自己的超时之前总是会清除另一个“时钟”的任何现有超时。