如何使用不同的参数一遍又一遍地运行函数

Question

我有一个倒计时的功能。它需要两个参数 - 分钟，秒。

首先，它应该倒计时一段时间，例如60秒，然后当时间是0:00时，它应该再次启动该功能，但使用不同的参数，例如30秒。在它等于0之后，它应该在60秒内启动相同的功能，依此类推，直到无穷大或我改变函数变量工作等于假。

这是我到目前为止所尝试的代码：

＆＃13;

＆＃13;

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


<div id="timer"></div>
<div id="start">start counting<div>
  <script>
  var count = 1000;
var working = true; 
var running = false;
                // year, month, day, hour, min, sec
var date = new Date(1995, 11, 17, 3, 0, 02);

var newInterval;
var newBreak;
//  alert(date.getMinutes() + ":" + date.getSeconds());
$('#start').click(function(){
  if(working){
    countDown(0,6);
    working = false;
  } else if(!working) {
    countDown(0,25);
    working = true;
  }
  
  
});

function countDown(minutes, seconds){
   date.setMinutes(minutes);
   date.setSeconds(seconds);
   var breaker = setInterval(function(){
   date.setSeconds(date.getSeconds() - 1);
   if(date.getMinutes()== 0 && date.getSeconds() ==0){
      clearInterval(breaker);
     alert("aaaa?");
   }
   document.getElementById("timer").innerHTML = date.getMinutes() +":"+ date.getSeconds(); 
  },1000);

}


  </script>

＆＃13;

＆＃13;

＆＃13;

如何使用不同的参数使countDown函数反复运行。所以最终结果是在1分钟结束后运行30秒倒计时，30秒后完成运行1分钟倒计时。

Answer 1

让countDown接受回调或返回承诺，然后在完成调用回调或解决承诺时。这让调用代码开始下一个倒计时。

使用承诺：

function countDown(minutes, seconds) {
  return new Promise(function(resolve) { // <====
    date.setMinutes(minutes);
    date.setSeconds(seconds);
    var breaker = setInterval(function() {
      date.setSeconds(date.getSeconds() - 1);
      if (date.getMinutes() == 0 && date.getSeconds() == 0) {
        clearInterval(breaker);
        resolve();                       // <====
      }
      document.getElementById("timer").innerHTML = date.getMinutes() + ":" + date.getSeconds();
    }, 1000);
  });
}

用法：

$('#start').click(function() {
  countDown(0, 6).then(function() {  // <====
    countDown(0, 25);                // <====
  });                                // <====
});

直播示例：

＆＃13;

＆＃13;

var count = 1000;
var working = true;
var running = false;
// year, month, day, hour, min, sec
var date = new Date(1995, 11, 17, 3, 0, 02);
var breakTime = document.getElementById("break").innerHTML = 5;
var intervalTime = document.getElementById("timeInterval").innerHTML = 25;
var newInterval;
var newBreak;
//  alert(date.getMinutes() + ":" + date.getSeconds());
$('#start').click(function() {
  countDown(0, 6).then(function() {  // <====
    countDown(0, 25);                // <====
  });                                // <====
});

function countDown(minutes, seconds) {
  return new Promise(function(resolve) { // <====
    date.setMinutes(minutes);
    date.setSeconds(seconds);
    var breaker = setInterval(function() {
      date.setSeconds(date.getSeconds() - 1);
      if (date.getMinutes() == 0 && date.getSeconds() == 0) {
        clearInterval(breaker);
        resolve();                       // <====
      }
      document.getElementById("timer").innerHTML = date.getMinutes() + ":" + date.getSeconds();
    }, 1000);
  });
}

$(".incrementTime").click(function() {
  newInterval = $('#timeInterval').text(parseInt($('#timeInterval').text()) + 1);
});
$(".decrementTime").click(function() {
  newInterval = $('#timeInterval').text(parseInt($('#timeInterval').text()) - 1);
});

$(".incrementBreak").click(function() {
  newBreak = $('#break').text(parseInt($('#break').text()) + 1);
});
$(".decrementBreak").click(function() {
  newBreak = $('#break').text(parseInt($('#break').text()) - 1);
});

＆＃13;

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

<div class="container">
  <div class="col-md-3"></div>
  <div class="col-md-3">
    <button type="button" class="btn btn-default decrementBreak">-</button>
    <span id="break">5</span>
    <button type="button" class="btn btn-default incrementBreak">+</button>
  </div>
  <div class="col-md-3">
    <button type="button" class="btn btn-default decrementTime">-</button>
    <span id="timeInterval">25</span>
    <button type="button" class="btn btn-default incrementTime">+</button>
  </div>
  <div class="col-md-3"></div>

</div>
<div id="timer"></div>
<div id="start">start counting
  <div>

＆＃13;

＆＃13;

＆＃13;

使用回调：

function countDown(minutes, seconds, callback) {
  // --------------------------------^
  date.setMinutes(minutes);
  date.setSeconds(seconds);
  var breaker = setInterval(function() {
    date.setSeconds(date.getSeconds() - 1);
    if (date.getMinutes() == 0 && date.getSeconds() == 0) {
      clearInterval(breaker);
      if (callback) {           // <====
        callback();             // <====
      }                         // <====
    }
    document.getElementById("timer").innerHTML = date.getMinutes() + ":" + date.getSeconds();
  }, 1000);
}

用法：

$('#start').click(function() {
  countDown(0, 6, function() {  // <====
    countDown(0, 25);           // <====
  });                           // <====
});

或者，再次，您可以使用承诺。

直播示例：

＆＃13;

＆＃13;

var count = 1000;
var working = true;
var running = false;
// year, month, day, hour, min, sec
var date = new Date(1995, 11, 17, 3, 0, 02);
var breakTime = document.getElementById("break").innerHTML = 5;
var intervalTime = document.getElementById("timeInterval").innerHTML = 25;
var newInterval;
var newBreak;
//  alert(date.getMinutes() + ":" + date.getSeconds());
$('#start').click(function() {
  countDown(0, 6, function() {  // <====
    countDown(0, 25);           // <====
  });                           // <====
});

function countDown(minutes, seconds, callback) {
  // --------------------------------^
  date.setMinutes(minutes);
  date.setSeconds(seconds);
  var breaker = setInterval(function() {
    date.setSeconds(date.getSeconds() - 1);
    if (date.getMinutes() == 0 && date.getSeconds() == 0) {
      clearInterval(breaker);
      if (callback) {           // <====
        callback();             // <====
      }                         // <====
    }
    document.getElementById("timer").innerHTML = date.getMinutes() + ":" + date.getSeconds();
  }, 1000);
}

$(".incrementTime").click(function() {
  newInterval = $('#timeInterval').text(parseInt($('#timeInterval').text()) + 1);
});
$(".decrementTime").click(function() {
  newInterval = $('#timeInterval').text(parseInt($('#timeInterval').text()) - 1);
});

$(".incrementBreak").click(function() {
  newBreak = $('#break').text(parseInt($('#break').text()) + 1);
});
$(".decrementBreak").click(function() {
  newBreak = $('#break').text(parseInt($('#break').text()) - 1);
});

＆＃13;

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

<div class="container">
  <div class="col-md-3"></div>
  <div class="col-md-3">
    <button type="button" class="btn btn-default decrementBreak">-</button>
    <span id="break">5</span>
    <button type="button" class="btn btn-default incrementBreak">+</button>
  </div>
  <div class="col-md-3">
    <button type="button" class="btn btn-default decrementTime">-</button>
    <span id="timeInterval">25</span>
    <button type="button" class="btn btn-default incrementTime">+</button>
  </div>
  <div class="col-md-3"></div>

</div>
<div id="timer"></div>
<div id="start">start counting
  <div>

＆＃13;

＆＃13;

＆＃13;