Question

我有一个2分钟的计时器，点击btn开始。如果你点击btn它完美地工作，并在完成2分钟再次点击btn它完美地工作。

问题：如果用户在完成2分钟之前单击btn，则计时器重新启动并启动计时器并行两次或n次。

我需要帮助，每个点击计时器应该从头开始，只运行一个计时器。

请参阅“运行代码段”以获得更清晰的信息。

$('.timer-btn').off('click').on('click', myfunction);

            function myfunction(){
              var countdown = 2 * 60 * 1000;
              var timerId = setInterval(function(){
              countdown -= 1000;
              var min = Math.floor(countdown / (60 * 1000));
              //var sec = Math.floor(countdown - (min * 60 * 1000));  // wrong
              var sec = Math.floor((countdown - (min * 60 * 1000)) / 1000);  //correct

              if (countdown <= 0) {
                 alert("30 min!");
                 clearInterval(timerId);
                 //doSomething();
              } else {
                 $("#timerDiv").html(min + " : " + sec);
              }
              }, 1000);
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="timerDiv"> timer here </div>
<div class="timer-btn"> Click Me </div>

Answer 1

您需要在开始新的间隔之前清除上一个间隔。

var timerId;

function myfunction(){
    var countdown = 2 * 60 * 1000;
    timerId = clearInterval(timerId);
    timerId = setInterval(function(){
        countdown -= 1000;
        var min = Math.floor(countdown / (60 * 1000));
        //var sec = Math.floor(countdown - (min * 60 * 1000));  // wrong
        var sec = Math.floor((countdown - (min * 60 * 1000)) / 1000);  //correct

        if (countdown <= 0) {
            alert("30 min!");
            clearInterval(timerId);
            //doSomething();
        } else {
            $("#timerDiv").html(min + " : " + sec);
        }
    }, 1000);
}

$('.timer-btn').off('click').on('click', myfunction);

需要帮助（javascript / jquery计时器功能）

1 个答案: