点击事件不产生任何结果

Question

这里完全是菜鸟。

我正在编写一个倒数计时器，它开始单击“开始”按钮。无论我做什么，计时器总是在页面加载时启动。我的意思是，当在 VS Code 上使用实时服务器时，每次我保存页面时，计时器都会启动。控制台中没有出现错误。可能我遗漏了一些非常基础的东西，但我希望得到一些帮助！

const btnStart = document.querySelector('.start');

const startTimer = function() {
let time = 10;

const timer = setInterval(function() {
    const min = String(Math.trunc(time/60));
    const sec = String(time%60);
   
    time --;
    input.value = `${min.length <= 9 ? min.padStart(2, 0) : min}:${sec.length <= 9 ?sec.padStart (2, 0) : sec}`;
    if(time == 0){
        setTimeout(function(){clearInterval(timer);
            startTimer();}, 1000)
        
    } 
}, 1000)
}

btnStart.addEventListener('click', startTimer);

Html 元素部分：

<div class="main-container">
        <input type="text" class="input" placeholder="MM:SS">
        <div class="buttons-container">
            <a href="" class="button start">Start</a>
            <button class="start">START</button>
            <a href="" class="button stop">Stop</a>
            <a href="" class="button reset">Reset</a>
        </div>
    </div>

Answer 1

您对问题的新编辑回答了问题。

您正在使用 VSCode LiveShare。当您保存时，它实际上并不重新加载页面，它只是加载更改。

由于您递归调用 startTimer();（它在 setTimeout 中调用自身），它永远不会停止，因为它不是完全重新加载。

解决此问题的最简单方法是手动重新加载页面（Ctrl+r 或 Command+r）

解决这个问题的更难的方法是将 timer 存储为全局变量，并且在加载时，如果 timer 存在，运行 clearInterval(timer)

点击事件不产生任何结果

Click event doesn't produce any result

javascript

dom

dom-events