JavaScript'te Zamanlayıcı Başlatma ve Durdurma Düğmeleri

Şimdi iki düğme yapalım: birincisine tıklandığında zamanlayıcı başlasın, ikincisine tıklandığında ise dursun. Burada her şey o kadar basit olmayacak ve bizi bir sürpriz bekliyor. Bu sürprizin özünü anlamak için kodu oluşturmayı adım adım anlatacağım.

İşte, iki küçük düğme yapıyoruz:

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

Bu düğmelerin referanslarını değişkenlere alalım:

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

İlk düğmeye tıklandığında, zamanlayıcıyı başlatalım ve numarasını bir değişkene yazalım:

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

Şimdi de zamanlayıcıyı ikinci düğmeye tıklandığında durduralım:

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

// Zamanlayıcıyı durduruyoruz:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Ancak, yukarıdaki kodu çalıştırmaya çalışırsak, bir sürprizle karşılaşırız: zamanlayıcıyı durdurmaya çalıştığımızda, timerId değişkeninin undefined olduğu anlaşılır! Neden böyle oldu? Çünkü zamanlayıcıyı başlattığımızda, timerId değişkenimizi start düğmesine bağlı fonksiyonun içinde yerel yaptık.

Sorunu çözmek için timerId değişkenini global yapalım - bu durumda hem zamanlayıcıyı başlatan fonksiyonda hem de durduran fonksiyonda erişilebilir olacaktır:

let timerId; // değişkeni global yapalım

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

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

Başlangıçta 100 sayısını saklayan bir değişken verilsin. Ayrıca iki düğme verilsin. İlk düğmeye tıklandığında, değişkenin değerini her saniye 1 azaltan ve yeni değeri konsola yazdıran bir zamanlayıcı başlatın. Değişkenin değeri sıfıra ulaştığında - zamanlayıcıyı durdurun.

İkinci düğmeye tıklandığında zamanlayıcıyı durdurun. Ayrıca, ikinci düğmeye tıklanmamış olsa bile değişkenin değeri sıfıra ulaştığında zamanlayıcıyı durdurun.

Bir programcı, bir düğmeye tıklandığında konsola mevcut zamanı yazdıran bir zamanlayıcı başlatan bir kod yazdı:

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

Ancak, kod çalıştırıldıktan sonra, durdurma düğmesinin çalışmadığı anlaşıldı. Kod yazarının hatasını düzeltin.

Başka bir programcı da önceki görevi çözmek için bir kod yazdı:

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

Ancak, kod çalıştırıldıktan sonra, yine durdurma düğmesinin çalışmadığı anlaşıldı. Kod yazarının hatasını düzeltin.

Başka bir programcı da önceki görevi çözmek için bir kod yazdı:

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

Ancak, kod çalıştırıldıktan sonra, yine durdurma düğmesinin çalışmadığı anlaşıldı. Kod yazarının hatasını düzeltin.

Başka bir programcı da önceki görevi çözmek için bir kod yazdı:

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

Ancak, kod çalıştırıldıktan sonra, yine durdurma düğmesinin çalışmadığı anlaşıldı. Kod yazarının hatasını düzeltin.

Teorik kısımda verdiğim kod, başlat düğmesine birkaç kez tıklanabileceğini hesaba katmıyor. Bu sorunu düzeltmek için, başlat düğmesine tıklandığında olayı bu düğmeden kaldırabiliriz, ve durdur düğmesine tıklandığında tekrar bağlayabiliriz. Sorunu düzeltin.