Question 269036 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I stop the timeout from a function recursively when a button is clicked

I’m building a simple digital clock on JavaScript and have implemented the 12 hour format clock as follows:

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);
}

I’m calling this via an onclick function. Now I’m trying to implement a format switcher for 24hr format as :

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);
}

The issue is that the timeouts are not syncing and if I use the switcher after I get the 12hr time the time keeps switching between 12hr and 24hr.

I tried using clearTimeout but couldnt find a way to do so. I could always use 2 buttons for 12hr and 24hr but I want a switcher. Is there a way to stop the timeout in the other function in the 24hr function?

Tags:

2

Answers


  1. 0

    If the t1 and t2 variables are in a higher scope, both functions can access them and clear them. For example:

    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);
}

    This way each "clock" always clears any existing timeout for the other "clock" before setting its own.

    Login or Signup to reply.
  2. 0

    You need to move t1 and t2 to the higher scope

    I also removed from duplicates from your code:

    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;

  return hh + "." + mm + "." + ss + " " + session;

}

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;

  return hh + "." + mm + "." + ss + " " + session;

}

let timeout;

function loop(fn) {
  document.getElementById("time").innerHTML = fn();
  timeout = setTimeout(function() {
    loop(fn)
  }, 1000);
}
let h24 = true
loop(get24hrTime)
btn.onclick = () => {
  clearTimeout(timeout)
  h24 = !h24
  loop(h24 ? get24hrTime : get12hrTime)
}
    <p id="time"></p>
<button id="btn">change</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search