Temel JavaScript (4) - Zamanlayıcılarla çalışmak

Dikkat: Bu yazının yazılma tarihinin üzerinden en az 60 gün geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir. Yorumları ve güncellemeleri göz önünde bulundurarak yazıyı takip ediniz.

Zamanlayıcı da nesi?

Javascripte otomatik işler yaptırırken sürekli bişeyleri gözetlemek isteyebilir, belirli periyodlarla bişeyler yaptırmak isteyebilir ya da gecikmeli işler verebiliriz. Bunun için zamanlayıcıları kullanırız. Çoğu kullanıcıyla eşzamanlı çalışan programlama dillerinde olduğu gibi javascriptde de zamanlayıcılar kodlarda oldukça fazla biçimde kullanılır.
Zamanlayıcıların kullanımı çok basittir. Bir değişkeni zamanlayıcı objesi olarak atayıp onu kontrol edebilir veya nasıl çalıştığı önemli olmayan zamanlanmış işlerde yani kontorl etmenize gerek olmayan zamanlayıcılarda objeleştirmeye gerek yoktur. Bunları kısa örneklerle açıklayalım.

Basit bir yüklenme efekti yapalım.

<input type="button" value="Başla ->" onClick="isle();">
<input type="text" value="" id="islem_bar" size="50"><br>

<script>
function isle(){
  obje = document.getElementById('islem_bar');
  if(obje.value.length == 40){
    clearTimeout(zamanlayici);
    alert("Bitti");
  }else{
    obje.value += '+';
    zamanlayici = setTimeout('isle()',100);
  }
}
</script>
Aslında oldukça basit. setTimeout fonksiyonu çift parametreli, birincisi tırnaklar içerisinde yapılacak işi diğeri ise milisaniye cinsinden gecikmeyi belirtiyor. Yukarıda bu fonksiyon sürekli içerisinde bulunduğu fonksiyonu çağırttığı için durdurulmadığı sürece teorik olarak sonsuza kadar dönecektir. Ancak biz işlem olarak sürekli bir text inputa "+" işareti yazdırıyoruz, ve kontrol olarak da o text inputtaki karakter uzunlugunu kontrol ediyoruz. bir progress bar şekli için input'un dolması yeterli, input'un görünür karakter uzunluğunu 50 olarak ayarlamıştık. Bu sahayı 40 karakter tamamiyle doldurmaya yetiyor. Onun için inputun karakter uzunluğu 50 olduğu zaman ayarladığımız zamanlayıcı objesini clearTimeout fonksiyonu ile sıfırlıyoruz. Böylece bitmiş oluyor.


Temel JavaScript (5) - Küçük uygulamalar dökümanından devam edin.



Hazırlayan : Mehmet Fatih YILDIZ

Yorumlar

Üye Resmi hakan karakaş
19 Mayıs Pazartesi ´08 15:58
Benim için çok yararlı oldu. Projeme böyle bir şey eklemem gerekiyordu. Emeğine sağlık
Üye Resmi yedincisenol
31 Mayıs Pazar ´09 20:08
Güzel yazı,teşekkürler.
Üye Resmi holmes
1 Şubat Cuma ´13 12:22
Geçekten çok güzel bir yazı olmuş böte(bilgisayar öğretmenliği okuyan arkadaşlar) okuyan arkadaşlar bu siteyi mutlaka görmeli. Böyle bir paylaşımda bulunduğunuz için çok teşekkürler. Sağlıcakla kalın:)
Yeni Yorum *
İletişim Bilgileri
*
*
E-Posta adresiniz gösterilmeyecektir.
(unut)
Güvenlik Kodu *

Gönderiliyor