Почему мои часы не могут быть остановлены во второй раз? Почему 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 читает старую глобальную переменную Удалить var от start чтобы обновить глобальную переменную:

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 2

Посмотри на свой start функция:

var myclock = setInterval(...

Вы определяете новую переменную здесь, которая не доступна для stop, Чтобы он работал так, как вы хотели, удалите var:

myclock = setInterval(...

Answer 3

Во-первых, вы объявляете переменную myclock снова в вашем start функция. Когда вы ссылаетесь myclock в stop вы ссылаетесь на переменную снаружи, а не на внутри 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()" />