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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

let 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);
});

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

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

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

let 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);
});

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

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

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

let 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);
});

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

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

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

let 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();
});

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

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