再次单击开始按钮时计数器速度增加

Question

单击一次开始按钮后，一切正常。但是，当 start 按钮被多次点击时（例如无意中），计数器的速度会增加而 stop 按钮不会似乎不再有效了！

为什么会这样？我能做些什么来防止 start 按钮（如果不小心点击）在已经运行时增加计时器的速度？

<button id="startBtn" onclick="startTimer()">Start</button>
    <button id="stopBtn" onclick="stopTimer()">Stop</button>
    <h2 id="timer"></h2>
    <script>
        let myCounter
        function startTimer() {
            myCounter = setInterval(counter, 200);
        }
        function stopTimer() {
            clearInterval(myCounter);
        }
        let i = 0;
        function counter() {
            document.getElementById("timer").innerHTML = i++;
        }
    </script>

Answer 1

我添加了一个变量，可以帮助您检测计数器是否已被点击，根据该变量的条件，您可以得到您想要的，我编辑了您的代码。

<button id="startBtn" onclick="startTimer()">Start</button>
    <button id="stopBtn" onclick="stopTimer()">Stop</button>
    <h2 id="timer"></h2>
    <script>
        let myCounter
        let clicked = false;
        function startTimer() {
            if(!clicked){
                myCounter = setInterval(counter, 200);
            }
            clicked = true;
        }
        function stopTimer() {
            if(clicked){
              clearInterval(myCounter);
            }
            clicked = false;
        }
        let i = 0;
        function counter() {
            document.getElementById("timer").innerHTML = i++;
        }
    </script>

Answer 2

欢迎来到 Whosebug。

在你的问题中，不清楚你是否希望在用户再次单击开始按钮时重置计时器，但是根据我的回答，我得出的结论是你没有。

这是 startTimer() 的修改版本，它使用 保护子句 检查间隔是否已经存在（如果存在，则不要重新开始）

function startTimer() {

    // Guard clause! If the counter exists, exit the function!
    if(myCounter) {
        return
    }

    myCounter = setInterval(counter, 200);
}

计数器停止后，还需要对停止函数进行微小的更新以set myCounter到null：

function stopTimer() {
    clearInterval(myCounter);
    // Set the counter to Null, because it is still declared even though it has no value! (try removing this line and see what happens when you hit start again)
    myCounter = null;
}

希望对您有所帮助:)

Answer 3

您可以简单地在单击开始按钮后禁用它，然后 re-enable 在单击停止按钮时禁用它。

let i = 0;
let myCounter;

let startBtn = document.getElementById('startBtn');
let stopBtn = document.getElementById('stopBtn');
let timer = document.getElementById('timer');

function startTimer() {
  startBtn.disabled = true;
  stopBtn.disabled = false;
  myCounter = setInterval(counter, 200);
}

function stopTimer() {
  startBtn.disabled = false;
  stopBtn.disabled = true;
  clearInterval(myCounter);
}

function counter() {
  i++; timer.value = i;
}

startBtn.addEventListener('click', startTimer);
stopBtn.addEventListener('click', stopTimer);

<button id="startBtn">Start</button>
<button id="stopBtn" disabled>Stop</button>
<h2><output id="timer">0</output></h2>

作为一项附加措施，您甚至可以隐藏禁用的按钮，以便只显示活动的按钮。

button:disabled {
  display: none;
}

再次单击开始按钮时计数器速度增加

Counter speed increases when the start button is clicked again

javascript