Кнопки для запуска и остановки таймера на JavaScript

Давайте теперь сделаем две кнопки: по нажатию на первую пусть таймер запускается, а по нажатию на вторую - останавливается. Здесь уже все будет не так просто и нас ждет подвох. Для того, чтобы понять суть этого подвоха, распишу создание кода по шагам.

Итак, делаем две кнопочки:

html<button id="start">start</button>
<button id="stop">stop</button>

Получаем ссылки на эти кнопки в переменные:

javascriptlet start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

По нажатию на первую кнопку стартуем таймер, записав его номер в переменную:

javascriptstart.addEventListener('click', function() {
  let timerId = setInterval(function() {
    console.log('!')
  }, 1000);
});

А теперь остановим таймер по нажатию на вторую кнопку:

javascriptstart.addEventListener('click', function() {
  let timerId = setInterval(function() {
    console.log('!')
  }, 1000);
});

// Останавливаем таймер:
stop.addEventListener('click', function() {
  clearInterval(timerId);
});

Однако, если попытаться запустить приведенный выше код, нас ждет сюрприз: при попытке остановить таймер окажется, что переменная timerId равна undefined! Почему так произошло? Потому при запуске таймера мы сделали нашу переменную timerId локальной внутри функции, привязанной к кнопке start.

Для решения проблемы сделаем переменную timerId глобальной - в этом случае она будет доступна как в функции запуска таймера, так и в функции остановки:

javascriptlet timerId; // сделаем переменную глобальной

start.addEventListener('click', function() {
  timerId = setInterval(function() {
    console.log('!')
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval(timerId);
});

Задание 1

Пусть дана переменная, в которой изначально хранится число 100. Даны также две кнопки. По нажатию на первую кнопку запустите таймер, который каждую секунду будет уменьшать значение переменной на 1 и выводить новое значение в консоль. Как только значение переменной достигнет нуля - остановите таймер.

По нажатию на вторую кнопку остановите таймер. Также остановите таймер, если вторая кнопка не была нажата, но значение переменной достигло нуля.

Задание 2

Некоторый программист написал код, который по нажатию на кнопку запускает таймер, выводящий в консоль текущий момент времени:

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

start.addEventListener('click', function() {
  let timerId = setInterval(function() {
    let date = new Date;
    console.log(date.getMinutes() + ' ' + date.getSeconds());
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval(timerId);
});

После запуска кода, однако, оказалось, что кнопка остановки не работает. Исправьте ошибку автора кода.

Задание 3

Еще один программист также написал код для решения предыдущей задачи:

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

let timerId;

start.addEventListener('click', function() {
  let timerId = setInterval(function() {
    let date = new Date;
    console.log(date.getMinutes() + ' ' + date.getSeconds());
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval(timerId);
});

После запуска кода, однако, опять оказалось, что кнопка остановки не работает. Исправьте ошибку автора кода.

Задание 4

Еще один программист также написал код для решения предыдущей задачи:

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
  setInterval(function() {
    let date = new Date;
    console.log(date.getMinutes() + ' ' + date.getSeconds());
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval(timerId);
});

После запуска кода, однако, опять оказалось, что кнопка остановки не работает. Исправьте ошибку автора кода.

Задание 5

Еще один программист также написал код для решения предыдущей задачи:

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
  let timerId = setInterval(function() {
    let date = new Date;
    console.log(date.getMinutes() + ' ' + date.getSeconds());
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval();
});

После запуска кода, однако, опять оказалось, что кнопка остановки не работает. Исправьте ошибку автора кода.

Задание 6

Приведенный мною в теоретической части код не учитывает то, что на кнопку старт можно сделать несколько нажатий. Для исправления этой проблемы можно по нажатию на кнопку старт отвязывать событие от этой кнопки, а по нажатию на кнопку стоп - привязывать обратно. Исправьте проблему.