JavaScript：阻止 setInterval 函数从运行直到按钮被点击

Question

JS 新手。我想在我的页面上添加一个按钮，上面写着“开始游戏”。单击后，倒计时功能开始执行，每秒将按钮上的文本从 10 更改为 0，此时按钮会说“时间到了！”

我已经使用 setInterval 方法让倒数计时器开始工作，但它会在页面加载后立即启动运行ning（下面的运行代码片段可以查看实际效果).

我试图阻止它运行ning 直到按钮被点击。这是我的 html 按钮（带有属性 "onclick="startTimer()"）和 JS：

var timeleft = 10
var gameTimer = setInterval(startTimer, 1000);
function startTimer () {
    if (timeleft <= 0) {
        clearInterval(gameTimer);
        document.getElementById("countdown").innerHTML = "Time's Up!";
    } else {
        document.getElementById("countdown").innerHTML = timeleft;  
    }
    timeleft -=1;
};

<button id="countdown" onclick="startTimer()">Start Game</button>

我尝试添加一个 preventDefault 来阻止它在加载时运行ning，但没有任何改变。我怎样才能阻止函数运行ning 直到它听到点击事件？

Answer 1

此处答案的核心是将 setInterval() 的调用移动到单击按钮时调用的函数中。

但是，您确实应该稍微重构这段代码，以提高可读性和功能。例如，我希望 startTimer() 完全按照它所说的去做 - start 计时器，仅此而已。然而，这个函数似乎处理了 timeleft.

的递减

上面评论中的建议目前可能没有意义的原因是你不想每次都调用setInterval()来减少timeleft。将这个功能分解成离散的功能，让自己省去头痛。

var timeleft = 10
var gameTimer;

function startTimer() {
  gameTimer = setInterval(tick, 1000);
};

function tick() {
  if (timeleft <= 0) {
    clearInterval(gameTimer);
    document.getElementById("countdown").innerHTML = "Time's Up!";
  } else {
    document.getElementById("countdown").innerHTML = timeleft;
  }
  timeleft -= 1;
}

<button id="countdown" onclick="startTimer()">Start Game</button>

JavaScript：阻止 setInterval 函数从运行直到按钮被点击

JavaScript: Prevent setInterval Function From Running Until Button is Clicked

javascript

setinterval

JavaScript：阻止 setInterval 函数从 运行 直到按钮被点击

JavaScript: Prevent setInterval Function From Running Until Button is Clicked

javascript

setinterval

JavaScript：阻止 setInterval 函数从运行直到按钮被点击