Тугманинг JavaScript да турли марта босилиши ва таймерни ишга тушириш

Юқорида келтирилган менинг код, аслинда муайян муаммога эга. Бу муаммо агар бизнинг тугмамизга бир неча mарта босилса, ўзини намойон қилади. Бу ҳолатда ҳар бир босилш янгы таймерни ишга тушишига олиб келади.

Яъни, масалан, тугмага уч марта босилш унинг натижасида учта таймер ишга тушади, ва уларнинг ҳар бири ҳисоблагычнинг қийматини консолга чиқаради. Бу демакки, қийматлар уч баробар тез ўзгаради!

Юқорида тавсифланган муаммони ҳал қилиш учун, жуда содда қилиб, тугмага такрорланган босилш янги таймерни ишга тушишига олиб келмаслигини таъминлаш керак. Масалан, таймерни ишга туширгандан сўнг, тугмага богланган босилш ишловчисини ундан ажратиб қўйиш мумкин:

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

start.addEventListener('click', function func() {
	let i = 0;
	
	setInterval(function() {
		console.log(++i);
	}, 1000);
	
	this.removeEventListener('click', func); // ишловчини ажратамиз
});

Олдинги машқнинг ёзилган ҳаллини олинг. Тугмага турли марта босилш ҳисобланшнинг тезлашишига олиб келишини текшириб кўринг. Бу муаммони тузатинг.