Question

StopBtn不能被调用两次

一旦函数被调用，它将保持不变并且不起作用，并且我还收到一条错误消息，说Timer不是对象。我真的不知道问题出在哪里

var timer = setInterval(clock, 1000);

function clock() {
  var date = new Date();
  var time = date.toLocaleTimeString();

  document.getElementById("time").innerHTML = "The Current time is > " + time;
}

var startBtn = document.getElementById("start");
var stopBtn = document.getElementById("stop");

stopBtn.addEventListener("click", stopTime);

function stopTime() {
  var stoptime = clearInterval(timer);
  console.log("Stop");
}

startBtn.addEventListener("click", startTime);

function startTime() {
  var starttime = setInterval(clock, 1000);
  console.log("hello");
}
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai&display=swap" rel="stylesheet" />
</head>

<body>
  <button id="stop">STOP TIME</button>
  <button id="start">START TIME</button>
  <h1 id="h1">We are Coding JavaScript</h1>
  <h3>Keep On Practicing Dude!</h3>

  <div id="time"></div>

  <script src="script.js"></script>
</body>

</html>

Answer 1

在startTime函数中，您正在设置一个新变量来与计时器关联。 stopTime函数不使用该变量，因此在按下开始按钮后它不会停止计时器。

只需在计时器的整个代码中重复使用一个变量即可。

注释：

实际上，您有比所需的更复杂的解决方案。不需要clock()函数来启动时钟，也不需要startTime函数来调用clock函数，因为它们都需要执行相同的操作。

使用setInterval()（这是一次性计时器），而不是使用setTimeout，而是将计时器放在start函数的内部，以使其递归。

当您获取/设置的字符串不包含任何HTML时，请勿使用.innerHTML，因为.innerHTML具有安全性和性能方面的意义。使用DOM元素字符串时，请使用.textContent。

仅一次扫描DOM即可发现要反复使用的元素。

var startBtn = document.getElementById("start");
var stopBtn = document.getElementById("stop");
var clock = document.getElementById("currentTime");

startBtn.addEventListener("click", startClock);
stopBtn.addEventListener("click", stopClock);

// This one variable will represent the timer
// throughout the code
var timer = null;

function startClock() {
  var now = new Date();
  var time = now.toLocaleTimeString();
  clock.textContent = "The Current time is > " + time;
  timer = setTimeout(startClock, 1000)
}

function stopClock() {
  clearTimeout(timer);
  console.log("Stop");
}

startClock();

<button id="stop">STOP TIME</button>
<button id="start">START TIME</button>
<div id="currentTime"></div>

函数不能被多次调用

1 个答案: