javascript - 如何使用 jquery 设置重置选项

Question

我有倒计时功能，但重置选项不起作用。你能找出我哪里出错了吗？我需要点击重置按钮后倒计时也重置。

var timeoutHandle;

function countdown(minutes) {
  var seconds = 60;
  var mins = minutes

  function tick() {
    var counter = document.getElementById("timer");
    var current_minutes = mins - 1
    seconds--;
    counter.innerHTML =
      current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
    if (seconds > 0) {
      timeoutHandle = setTimeout(tick, 1000);
    } else {

      if (mins > 1) {

        // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst
        setTimeout(function() {
          countdown(mins - 1);
        }, 1000);

      }
    }
  }
  tick();
}

$("#reset").click(function() {
  countdown(0);
})

countdown(2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="timer">1:00</div>

<button id="reset">Reset</button>

https://jsfiddle.net/HRrYG/444/

Answer 1

检查一下

无论何时重置计时器，都不要忘记清除之前的计时器。

var timeoutHandle;
function countdown(minutes) {
    var seconds = 60;
    var mins = minutes
    function tick() {
        var counter = document.getElementById("timer");
        var current_minutes = mins-1
        seconds--;
        counter.innerHTML =
        current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        if( seconds > 0 ) {
            timeoutHandle=setTimeout(tick, 1000);
        } else {

            if(mins > 1){

               // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst
               setTimeout(function () { countdown(mins - 1); }, 1000);

            }
        }
    }
    tick();
}

$("#reset").click(function(){
    clearTimeout(timeoutHandle)
    countdown(2);
});

countdown(2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="timer">1:00</div>


<button id="reset">
Reset
</button>