javascript计时器问题

Question

我通过 JavaScript 编写了一个计时器代码。我想在单击按钮时停止此计时器，然后通过双击同一按钮重新启动它，但是，它目前只能工作一次。

代码如下：

let pElement = document.createElement('p');
document.body.appendChild(pElement);

let liveTimer = () => {
  let date = new Date();
  let onlineTime = date.toLocaleTimeString();

  pElement.innerHTML = onlineTime;
};

let setI = setInterval(liveTimer, 1000);

function stopTime() {
  clearInterval(setI);
}

function startTimer() {
  setInterval(liveTimer, 1000);
}

<button onclick="stopTime()" ondblclick="startTimer()">click me</button>

Answer 1

您在startTimer 函数中第二次调用setInterval 时忘记设置interval-Id。

仅仅因为您在此处设置了值let setI= setInterval(liveTimer,1000);，并不意味着当您执行setInterval(liveTimer,1000); 时该值将被刷新。这将返回您需要存储在变量中的不同值。

let pElement = document.createElement('p');
document.body.appendChild(pElement);


let liveTimer = () => {
  let date = new Date();

  let onlineTime = date.toLocaleTimeString();

  pElement.innerHTML = onlineTime;

};

let setI = setInterval(liveTimer, 1000);

function stopTime() {
  clearInterval(setI);
}


function startTimer() {
  setI = setInterval(liveTimer, 1000);
}

<button onclick="stopTime()" ondblclick="startTimer()">click me</button>