Daha önce "setInterval()" metodunu kullanarak yaptığımız örneğe benzer bir uygulamayı "setTimeout()" metodu ile yapalım, setInterval() ve setTimeout() metodu arasındaki en önemli fark, birincisinin verilen süre sonunda fonksiyonu tekrar tekrar çalıştırması, ikincisinin ("setTimeout()") ise verilen sürenin sonunda fonksiyonu sadece bir kere çalıştırmasıdır.
"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.
Bu metodu durdurmak ve sonlandırmak için de "clearTimeout()" kullanılır. Bu metodda da "setTimeout()" metodunu bir değişkene atayarak oluşturmamız gerekir ki aynı değişkeni kullanarak sonlandırabilelim. Aşağıdaki örnekle konuyu daha iyi anlayacağınızı düşünüyorum.
Söz dizimi..
Gösterim: var deger=window.setTimeout('fonk()',süre);
fonk: uygulanacak fonksiyon;
süre: fonksiyonun ne kadar süre sonra uygulanacağı
Sonlandırmak için: window.clearTimeout(deger);
deger: "setTimeout()" metodunu atadığımız değişken.
Uygulama..
Şimdi, başlat butonuna tıklandığında 10'dan başlayarak düşen saniye uygulaması yapalım, istediğimiz zaman "durdur butonu" ile işlemi sonlandırabilelim, 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.clearTimeout(deger);
document.getElementById('uyari').innerHTML="Geri sayımı durdurdunuz!";
}
function saniyeBaslat()
{
document.getElementById('uyari').innerHTML="";
if(saniye >0){
saniye --;
document.getElementById('saniye').innerHTML=saniye;
deger=window.setTimeout('saniyeBaslat()',1000);
}else{
window.clearTimeout(deger);
document.getElementById('uyari').innerHTML="Süreniz bitti!";
}
}
</script>
Kısaca...
- 2. "setTimeout()" 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. "clearTimeout(deger)" ile "setTimeout()" metodunu durdurduk,
- 7. İşlem durdurulunca "uyari" id'li katmana mesaj yazdırdık,
- 9. "setTimeout()" içinde kullanacağımız fonksiyonu yazdık "saniyeBaslat",
- 11. "uyari" id'li katmanın içeriğini sildik,
- 12. saniye "0" dan büyük olduğu sürece çalışacak koşulu koyduk,
- 13. "saniye" değerinin düşürülmesini, sağladık "saniye --",
- 14. saniye değerlerini "saniye" id'li katmana yazdırdık,
- 15. ÖNEMLİ! : burada "setTimeout()" metodunu "deger" değişkenine atayarak oluşturduk, fonksiyon olarak da metodumuzun içinde bulunduğu fonksiyonu ("saniyeBaslat()") verdik, bir nevi iterasyonla, setTimeout() metodunun tekrar tekrar çalışmasını sağladık, normalde setTimeout() için dışardaki bir fonksiyonu kullansaydık, bu fonksiyon 1 saniye sonra çalışıp sonlanacaktı.
- 14. saniye "0" olduğunda, "setTimeout()" metodunu durdurduk,
- 15. "uyari" id'li katmana uyarı mesajımızı yazdırdık.
Aşağıda uygulamanın tüm kodlarını görebilirsiniz.
<script type="text/javascript">
var deger;
var saniye=11;
function saniyeDurdur()
{
window.clearTimeout(deger);
document.getElementById('uyari').innerHTML="Geri sayımı durdurdunuz!";
}
function saniyeBaslat()
{
document.getElementById('uyari').innerHTML="";
if(saniye >0){
saniye --;
document.getElementById('saniye').innerHTML=saniye;
deger=window.setTimeout('saniyeBaslat()',1000);
}else{
window.clearTimeout(deger);
document.getElementById('uyari').innerHTML="Süreniz bitti!";
}
}
</script>
<input type="button" onclick="saniyeBaslat()" value="Başlat" />
<input type="button" onclick="saniyeDurdur()" value="Durdur" />
<div id="saniye"></div>
<div id="uyari"></div>
Sonuç..
Bu metodta kullandığımız iterasyon yöntemi çok yoğun ve uzun süreli olursa, setTimeout() metodu yerine setInterval() metodunu kullanmanızı öneririm.
Özellikle, website tasarımında "Bakım Aşamasında" veya sitenin yayına gireceği zamanı gösteren sayfalarda, javascript ile oluşturulmuş geri sayım uygulamaları kullanılabilir.
Görüşmek üzere...
