javascript - 为什么我的定时器功能不倒计时？

Question

我正在做一个个人项目来创建一个番茄钟。我首先尝试创建一个带有开始和停止按钮的 25 分钟倒数计时器。我已经包含了一个计时器函数，它应该每 1000 毫秒对我的变量进行一次倒计时，但它不起作用。这是我的 HTML:

番茄钟

<div id="timer" class="circle">Timer</div>
<button onclick="setTimeout(timer, 1000);">Start</button>
<button>Stop</button>

Javascript:

var i = 25;
document.getElementById("timer").innerHTML = i;

function timer(){ 
  setInterval(function(){i--}, 1000);
}

我猜这可能与我的定时器功能有关？

Answer 1

document.getElementById("timer").innerHTML = i;

此处 i 的当前值被分配给 innerHTML。它不是通过引用传递的。

JavaScript 中唯一通过引用传递的数据类型是对象(普通对象、函数、数组等)。

您需要在间隔的每次迭代中将 i 的新值分配给 innerHTML:

setInterval(function(){
    i--;
    document.getElementById("timer").innerHTML = i;
}, 1000);