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

Question

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

当我第二次点击"stop"按钮时，时钟会不停。

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

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

看看你的start函数：

var myclock = setInterval(...

您在此处定义了一个新变量，stop 无法使用该变量。为了使其按您预期的方式工作，请删除 var:

myclock = setInterval(...

Answer 2

案例 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>

Answer 3

首先，您要在 start 函数中再次声明变量 myclock。当您在 stop 中引用 myclock 时，您引用的是外部变量，而不是 start 中的变量。这意味着清除不会清除 start.

中设置的定时器

其次，每次单击 start 时都会重新创建计时器，而不会清除前一个。

固定代码如下所示：

function showTime() {
  var timeNow = Date();
  var localTime = timeNow.toLocaleString();
  document.getElementById("time").innerHTML = localTime;
}

var myClock;

function stop() {
  clearInterval(myClock);
  myClock = null;
}

function start() {
  if (myClock)
    return; // timer is already set. no need to recreate.
    
  myClock = setInterval(showTime, 1000);
}

start();

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

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

Why my clock cannot be stopped for a second time-Why clearInterval does not work for a second timel(javascript)

javascript

clearinterval