使用同一按钮启动和停止的 Jquery 计时器

Question

我一生都无法弄清楚如何让它无错误地工作。

下面代码中的按钮需要做三件事。

1. 单击时开始倒计时（有效）
2. 自动结束倒计时，并在达到 0 时自行重置（有效）
3. 如果在倒计时中间单击，则过早重置自身（有效）

错误：重复单击时会启动多个倒计时，以及或多或少的休息。如果重复单击，它需要自行重置或开始倒计时。倒计时不应超过一次。

只要人们按下按钮，等待一秒钟，然后再次按下它即可停止它，它就可以正常工作。
我遇到的错误是，如果有人垃圾邮件点击它，它会开始多次倒计时，通常只会破坏按钮。我尝试了很多不同的方法来修复它，这是我得到的最接近的方法。

var i = 29;
let running=false;
$("#startButton").click(function () {     
    if(running==false){       
    var countdown = setInterval(function () {
        $("#startButton").text("Reset Timer"); 
        running=true;
        $("#stopWatch").html(i);
        i--;
        if (i <0)
    {
      $("#startButton").text("Start Timer");
      running=false;
      clearInterval(countdown);
      i = 29;
      $("#stopWatch").html(i); 
    }
     $("#startButton").click(function () {      
       $("#startButton").text("Start Timer");  
        running=false; 
      clearInterval(countdown);
      i = 29;
      $("#stopWatch").html(i+1);
    });
    }, 1000);
  }
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stopWatch">30</div>
<button  id="startButton">Start Timer</button>

Answer 1

欢迎来到 Stack Overflow @William！

我不确定这意味着什么：如果在倒计时中间单击，则提前重置自身（有点有效）。但我设法修复了垃圾邮件按钮点击上的错误，对于第 3 项，我只是从初始状态重置了倒计时。请参阅下面的片段：

// Get attribute value from div `stopwatch`. This is for resetting from default value.
var initial = $('#stopWatch').attr("value");
// Assigned initial value to var i.
var i = initial;
$("#stopWatch").html(i); 
let running = false;

// Created a separate function to call from button click.
function run(timer = true) {
    if (timer) {
        running = true;
            $("#startButton").text("Reset Timer"); 
        $("#stopWatch").html(i);
        var countdown = setInterval(function () {
            i--;
            $("#stopWatch").html(i);
            if (i <= 0) {
                running = false;
                $("#startButton").text("Start Timer");
                clearInterval(countdown);
                i = initial;
                $("#stopWatch").html(i);
            }
            }, 1000);
    } else {
        running = false;
        clearInterval(countdown);
        i = 0;
        $("#startButton").text("Start Timer");
    }
}

$("#startButton").click(function () {  
        // Check if its not running and var i is not 0
    if(!running && i != 0) {   
                run();
    // Check if its running and var i is not 0 to ensure that if someone spam the button it just reset the countdown.
    } else if (running && i != 0) {
        // Will return the else{} on function run().
        run(false);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stopWatch" value="30"></div>
<button  id="startButton">Start Timer</button>

在片段上添加了一些评论。如果您有任何疑问，请随时询问。