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:

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

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

javascriptlet 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:

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

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

javascriptstart.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:

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

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

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

Задание 1

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.

Задание 2

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

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

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

Задание 3

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

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

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

Задание 4

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

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

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

Задание 5

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

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

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

Задание 6

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.