js, multiple timer showing one after other on completion

Question

hello everyone i am trying to create multiple timers. when first timer is over second will start and when second ends third will start and it ends and so on...how i can achieve it in javascript using callbacks. i want to make timers on current time so that i will open it on any window it will show the same result. suggestions are highly appreciated.

// 1st function start time 
var countDownDate = new Date("Jan 6, 2018 11:42:00").getTime(); //datetimefinal

// function2 end time
var countDownDate1 = new Date("Jan 6, 2018 11:42:25").getTime(); //date time final

//function z is called from function y
var z = function() {
  alert('zzz');
}

//  function y is called from function x
var y = function() {
  // Get todays date and time
  var now = new Date().getTime(); // from now date
  // Find the distance between now an the count down date
  var distance = countDownDate1 - 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);

  // Display the result in the element with id="demo"
  document.getElementById("demo12").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s ";


  if (distance < 0) {
    // clearInterval(y);
    document.getElementById("demo12").innerHTML = "EXPIRED";
    var sz = new z(); //here function z is calling
  }

}

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime(); // from now date
  // Find the distance between now an 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);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
    var s = new y(); //here function y is calling
  }
}, 1000);

<p id="demo"></p>
<p id="demo12"></p>
<p id="demo123"></p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 1

You could probably improve the code with less repeating implementations in your functions and not using global variables in your functions (pass every value a function needs to the function).

const repeat = time => fn => {
  const t = setInterval(
    ()=>fn(t)
    ,time
  );
};
const getDistance = date1 => date2 => {
  const diff = date1-date2;
  return [
    Math.floor(diff / (1000 * 60 * 60 * 24)),
    Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
    Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
    Math.floor((diff % (1000 * 60)) / 1000),
    diff
  ];
}
const setHtml = el=>html=>{
  el.innerHTML = html;
};
const work = distanceFn => setHtmlFn => t => {
  [days,hours,minutes,seconds,diff] = distanceFn(new Date().getTime());
  if(diff<0){
    setHtmlFn("EXPIRED");
    clearInterval(t);//no longer call this function
  }else{
    setHtmlFn(`${days} d ${hours} h ${minutes} m ${seconds} s `);
  }
}
repeat(1000)
  (
    work
      (getDistance(new Date("Jan 6, 2018 11:42:25").getTime()))
      (setHtml(document.getElementById("demo12")))
  );
repeat(1000)
  (
    work
      //3 days from now
      (getDistance(new Date(new Date().getTime()+259200000).getTime()))
      (setHtml(document.getElementById("demo")))
  );

<p id="demo"></p>
<p id="demo12"></p>
<p id="demo123"></p>