Özellikle, website "Bakım Aşamasında" sayfalarında kullanılan çok gösterişli geri sayım uygulamaları vardır, bu tip uygulamalar, iyi CSS, HTML bilgisi ve işin özündeki javascript geri sayım teknikleri ile oluşturulmaktadır.
Geri sayım uygulaması sadece bu iş için kullanılmaz tabii, kullanıcıya herhangi bir şeyi belli bir zamanda içinde yaptırmak istediğiniz (Test uygulamaları, oyunlar, animasyonlar vb.) her tür uygulama için de idealdir.
"setInterval() ve setTimeout()" window nesnesinin önemli metodlarındandır, saat uygulaması, geri sayım gibi işler için kullanabilirsiniz.
Bu iki metod arasındaki fark, "setInterval()" verdiğiniz süre dolduğunda istenen fonksiyonu tekrar tekrar çalıştırır, "setTimeout()" ise süre sonunda istenen fonksiyonu bir kez çalıştırır.
Bu iki metodu durdurmak ve sonlandırmak için de "clearInterval()" ve "clearTimeout()" kullanılır. Bu iki metodu kullanmak için "setInterval() ve setTimeout()" metodunu bir değişkene atayarak oluşturmanız gerekir ki aynı değişkenleri kullanarak sonlandırabilesiniz. Aşağıdaki örnekle konuyu daha iyi anlayacağınızı düşünüyorum.
Söz dizimi..
Gösterim: var deger=window.setInterval('fonk()',süre);
fonk: uygulanacak fonksiyon;
süre: fonksiyonun ne kadar süre sonra uygulanacağı
Sonlandırmak için: window.clearInterval(deger);
deger: "setInterval()" metodunu atadığımız değişken.
Uygulama..
Şimdi, sayfa yüklendikten sonra 10'dan başlayarak düşen saniye uygulaması yapalım, istediğimiz zaman bir buton yardımıyla durdurabilelim, biz durdurmazsak saniye sıfır olunca kendisi dursun ve bize bilgi versin.
<script type="text/javascript">
var deger;
var saniye=11;
function saniyeDurdur()
{
window.clearInterval(deger);
}
function saniyeBaslat()
{
saniye --;
if(saniye >=0){
document.getElementById('saniye').innerHTML=saniye;
}else{
window.clearInterval(deger);
document.getElementById('uyari').innerHTML="Süreniz bitti!";
}
}
var deger=window.setInterval('saniyeBaslat()',1000);
</script>
Kısaca...
- 2. "setInterval()" için bir değişken tanımladık "deger",
- 3. saniye için bir değişken tanımladık "saniye", ve başlangıç değeri olarak "11" verdik
- 4. Butona tıklandığında saniyeyi durduracak fonksiyonu yazdık "saniyeDurdur",
- 6. "clearInterval(deger)" ile "setInterval()" metodunu durdurduk,
- 8. "setInterval()" içinde kullanacağımız fonksiyonu yazdık "saniyeBaslat",
- 10. "saniye" değerinin düşürülmesini, sağladık "saniye --",
- 11. saniye "0" dan büyük olduğu sürece çalışacak koşulu koyduk,
- 12. "saniye" id'li katmana saniye değerlerini yazdırdık,
- 14. saniye "0" olduğunda, "setInterval()" metodunu durdurduk,
- 15. "uyari" id'li katmana uyarı mesajımızı yazdırdık,,
- 18. "deger" değişkenimize "setInterval()" metodunu atayarak, her saniyede (1000ms) "saniyeBaslat()" fonksiyonunu çalıştırmasını istedik.
Aşağıda uygulamanın tüm kodlarını görebilirsiniz.
<script type="text/javascript">
var deger;
var saniye=11;
function saniyeDurdur()
{
window.clearInterval(deger);
}
function saniyeBaslat()
{
saniye --;
if(saniye >=0){
document.getElementById('saniye').innerHTML=saniye;
}else{
window.clearInterval(deger);
document.getElementById('uyari').innerHTML="Süreniz bitti!";
}
}
var deger=window.setInterval('saniyeBaslat()',1000);
</script>
<input type="button" onclick="saniyeDurdur()" value="Durdur" />
<div id="saniye"></div>
<div id="uyari"></div>
Sonuç..
"setInterval()" ve setTimeout() fonksiyonlarını sadece geri sayım veya sayı artırma gibi işler için düşünmeyin, bu metodla bir koşul oluşuncaya kadar veya tekrarlanmasını istediğiniz süre boyunca bir fonksiyonun çalıştırılmasını sağlayabilirsiniz, gerisi sizin yaratıcılığınıza kalmış...
Görüşmek üzere...
