Javascript setTimeout() Metodu Kullanımı (Zaman Ayarlı İşlem)

2.9/5

1 yorum

Hakan Taşan tarih

14 Ağustos 2015

Kullanımı çok basit ama önemli bir Javascript medotu olan setTimeout(), bir fonksiyonun veya kodun belirlediğiniz süre sonunda çalışmasını sağlar. Aslında bunu zamanlayıcı gibi düşünebilirsiniz ve belirlediğiniz süre sonunda işleminiz gerçekleşir. Kullanım alanı çok geniştir o yüzden metodun anlaşılması için ben bu yazıda 2 tane div penceresi gizleme örneği paylaşacağım.

Syntax

setTimeout(function, time);

function: Çalışmasını istediğiniz Javasciprt, jQuery kodları ya da fonksiyon ismi.

time: Milisaniye cinsinden zaman (5000 milisaniye = 5 saniye).

HTML Kodu

2 tane div alanı ve div alanlarını gizlemek için butonlar oluşturuldu.

<body>
    <button onclick="gizle1()">İlk Pencereyi Gizle</button>
    <br><br>
    <div id="pencere1"></div>
    <br><br>
    <button onclick="gizle2()">İkinci Pencereyi Gizle</button>
    <br><br>
    <div id="pencere2"></div>
</body>

CSS Kodu

Div alanlarını belirginleştirmek için arkaplan tasarım kodlarıdır.

div
{
    background:#94C9FF;
    height:200px;
    width:300px;
}

Javascript Kodu

gizle1() fonksiyonu: Butona tıklandığı andan itibaren 3 saniye geçtiğinde id'si pencere1 olan div alanını gizler.

gizle2() fonksiyonu: Butona tıklandığı andan itibaren 3 saniye geçtiğinde id'si pencere2 olan div alanını gizler, butona tekrar tıklandığında 3 saniye sonra div alanı ortaya çıkar. Burada fadeToggle() fonksiyonunu çalıştırmaktayız.

function gizle1()
{
    setTimeout(function(){ $("#pencere1").hide(); }, 3000);
}

function gizle2()
{
    setTimeout(function(){ $("#pencere2").fadeToggle(); }, 3000);
}