Javascript Zamanlama Olayları | setInterval() ve setTimeout()

Daha önceki yazılarda ve örneklerde belirttiğim gibi setInterval; belirlenen zaman diliminde bir veya birden fazla javascript kodlarını çalıştırmaya yarar. Çalıştırma aralığı olan zaman dilimi ise milisaniye cinsinden yazılmaktadır. Yani 1 saniye = 1000 değerini almaktadır.

setInterval Metodunun Kullanımı

Belirlenen zaman diliminde bir veya birden fazla javascript kodlarını çalıştırmaya yarar. Burada belirtilecek olan zaman dilimi ise milisaniye cinsinden yazılmaktadır. Örnek olarak yapısı şu şekildedir;

setInterval("fonksiyon", tekrarlanacak zaman );

Yukarıda ki kalıba göre hazırladığınız işlemleriniz belirlenen süre zarfında tanımlanan fonksiyon çalıştırılacaktır. Burada dikkat edilmesi gerekilen husus ise; Her hangi bir durdurma işlemi yapmadığımızdan dolayı fonksiyon sınırsız tekrarda olacaktır.

Örnek olarak bulunduğumuz saat değerini ekrana yazdırıp, her saniye yenileyerek dinamik bir saat oluşturalım.

<script type="text/javascript">
function saat(){
var zaman = new Date();
var saatim = zaman.toLocaleTimeString();
document.getElementById("saat").innerHTML= saatim;
}
setInterval("saat();",1000);
</script>
<div id="saat"></div>

Görmüş olduğunuz gibi basit bir şekilde dinamik bir saat yapısı oluşturmuş olduk. Burada belirtilen 1000 değeri, saat(); fonksiyonunu her saniye çalıştırılmasını belirtmektedir. Bu işlemi tekrarlama işi ise setInterval 'a kalmaktadır.

Her şey güzel hoşta bu setInterval'in çalışmasına bir yerde nasıl son veririz?

setInterval'in çalışmasını durdurmak için clearInterval 'i kullanmaktayız. Yukarıda belirtmiş olduğumuz örneğe ek olarak bir buton yapıp, o butona tıklandığında saati durdurması gerektiğini söyleyelim.

Yukarıdaki örneği olduğu gibi alarak ilk önde setInterval 'ı bir değişkene atıyoruz. Sonrasında ise bir fonksiyon oluşturup durdur diyoruz ve içine clearInterval yazıp değer olarak setInterval 'e yazdığımız değişken değerini yazıyoruz. Yani şöyle;

<script type="text/javascript">
function saat(){
var zaman = new Date();
var saatim = zaman.toLocaleTimeString();
document.getElementById("saat").innerHTML= saatim;
}
var tekrarla = setInterval("saat();",1000);

function durdur(){
clearInterval(tekrarla);
}
</script>
<div id="saat"></div>
<button onclick="durdur()">Zamanı Durdur Liseli!</button>

Yukarıdaki gibi değişikliği yaptıktan sonra ekrana hem saat hem de butonumuz gelecektir. Butona basana kadar saat süresiz tekrar edecektir. Butona tıklatıldığında ise saatimiz duracaktır.

setTimeout Metodunun Kullanımı

Tanımladığımız fonksiyonun kaç saniye sonra çalışmasını istediğimizde, setTimeout fonksiyonunu kullanmamız gerekmektedir. Böylelikle fonksiyonun çalışma zamanını da belirlemiş oluyoruz. Tekrardan yukarıdaki örneğe göre işlem yapacak olursak o zaman setInterval yerine setTimeout yazmamız yeterli olacaktır. Burada zaman belirttiğimiz alanda 5000 değerini yazarak saatin ekrana 5 saniye sonra gelmesini sağlamış oluyoruz.

<script type="text/javascript">
function saat(){
var zaman = new Date();
var saatim = zaman.toLocaleTimeString();
document.getElementById("saat").innerHTML= saatim;
}
setTimeout("saat();",5000);
</script>
<div id="saat"></div>
- 06.05.2014 / 04:09:58 3

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

3:59 jQuery Dersleri

jQuery Html ve Text metodlarının Kullanımı

Kategori: jQuery Dersleri | 03.05.2013
8:59 Css Dersleri

Css @Font-face Kullanımı

Kategori: Css Dersleri | 03.05.2013
6:13 Php Dersleri
22:01 cURL Dersleri

cURL ile Instagram Fotoğraflarını İndirme

Kategori: cURL Dersleri | 20.03.2015
3:11 Seo(.htaccess)

.htaccess Dosyası Oluşturma

Kategori: Seo(.htaccess) | 03.05.2013

Yorum Listesi (1) # YorumYap

  • Sami Babat (06.05.2014 - 19:41:33)
    Ibrahim Hocam Gercekten Harika Birisisiniz . Bildigim konular olmasına Ragmen Gene izledim . Sloganınız Ise Zaten Sizi Tasvir ediyor :)

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.