javascript - 为什么我的时钟不能第二次停止-为什么clearInterval不能第二次工作(javascript)

Question

我刚开始从零开始学习使用 Javascript 编码。我一直在尝试制作一个可以在单击时停止和启动的时钟。我遇到了一个让我很困惑的问题:当我第一次点击“停止”按钮时，时间确实停止了。当我单击“开始”按钮时，时钟再次运行。问题是:

• 当我第二次点击“停止”按钮时，时钟会不要停止。

你能告诉我为什么会这样吗？

var myclock = setInterval("showtime()", 1000);

function start() {
  var myclock = setInterval("showtime()", 1000);
}

function stop() {
  clearInterval(myclock);
}

function showtime() {
  var time_now = new Date();
  var local_time = time_now.toLocaleString();
  document.getElementById("time").innerHTML = local_time;
}

<div id="time"></div>
<input type="button" value="start" onclick="start()">
<input type="button" value="stop" onclick="stop()">

感谢您的宝贵时间。 :)

Answer 1

情况 1，w 和 r 使用相同的变量(内存中的相同名称和相同位置):

var x = 1;
function w () {
  x = 2;
}
function r () {
  return x;
}
w();
r(); // 2

情况 2，w 和 r 使用不同的变量(名称相同但内存中的位置不同):

var x = 1;
function w () {
  var x = 2;
}
function r () {
  return x;
}
w();
r(); // 1

在情况 2 中，var 关键字创建了一个局部于 w 的新变量，而 r 继续读取旧的全局变量。这同样适用于您的代码。由于 var 关键字，start 写入一个新的局部变量，而 stop 读取旧的全局变量。从 start 中删除 var 以更新全局变量:

function start() {
  myclock = setInterval("showtime()", 1000);
}

这是您的代码片段的一个固定且略有改进的版本:

var myclock;

start();

function start() {
  showtime();
  myclock = setInterval(showtime, 1000);
}

function stop() {
  clearInterval(myclock);
}

function showtime() {
  var time_now = new Date();
  var local_time = time_now.toLocaleString();
  document.getElementById("time").innerHTML = local_time;
}

<input type="button" value="start" onclick="start()">
<input type="button" value="stop" onclick="stop()">
<span id="time"></span>