Как решить проблему с таймером?

Question

[Isaac Clark]

Здравствуйте. Подскажите пожалуйста.
Есть кнопка, по нажатию на которую запускается таймер, который срабатывает через 3 секунды, после чего вызывается анимация(в данном случае пускай будет console.log(1)). Если, до того, как сработал таймер, то есть до 3-х секунд я нажму на кнопку еще раз, то мне нужно остановить/отменить выполнение этого таймера и начать выполнять этот же таймер, только с нуля, то есть каждое нажатие по кнопки — прерывает выполнение таймера и включает его заново.
Вот примерный код, в данному случает если я быстро нажимаю на кнопку, то срабатывают столько таймеров, сколько я раз нажал на кнопку, а нужно, чтоб срабатывал только последний таймер, то есть тот, который включился при последнем моем нажатии.

	$('#btn').click(function () {
		test();
	});		
	
	function test() {
        setTimeout(function () {
		    console.log('1'); 
		}, 3000);			
	}	

Спасибо за уделенное время.

p.s. 1 Можно использовать jquery, хотя смысла в этом не вижу…
p.s. 2 Если вы знаете решение этот проблемы с помощью замыкания и цыклов — я только за.

Answer 1

[transpond]

var timeoutID;

$('#btn').click(function () {
    test();
});		

function test() {
    clearTimeout(timeoutID);
    timeoutID = setTimeout(function () {
        console.log('1'); 
    }, 3000);			
}

Comments

[Виталий Желтяков]

Хочу добавить:
— Этот приём со связкой clearTimeout и setTimeout является правильным подходом использования таймеров, т.е. желательно его использовать всегда. Причина в том, что таймеры могут легко создать «скрытые замыкания» и, если не использовать заглушку из clearTimeout, возникает «утечка» памяти. К сожалению, абсолютное большинство программистов не знают о таких особенностях таймеров.

[Isaac Clark]

спасибо за помощь!

Answer 2

[Bardt]

Возможно, вам пригодится более прокачанный таймер, который я писал для одного из наших проектов:

github.com/bardt/bardtastic.timer.js
github.com/bardt/bardtastic.timer.js/blob/master/src/bardtastic.timer.js