js，多个计时器在完成后一个接一个显示

Question

大家好我想创建多个计时器。当第一个计时器超过秒时将开始，当第二个结束第三个将开始并结束，依此类推......我如何使用回调在javascript中实现它。我想在当前时间制作计时器，以便我将在任何窗口打开它，它将显示相同的结果。建议得到高度赞赏。

// 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

您可以使用函数中较少重复的实现来改进代码，而不是在函数中使用全局变量（将函数所需的每个值传递给函数）。

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()[phone]).getTime()))
      (setHtml(document.getElementById("demo")))
  );

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