İçerikler
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.
function saat(){
var zaman = new Date();
var saatim = zaman.toLocaleTimeString();
document.getElementById("saat").innerHTML= saatim;
}
setInterval("saat();",1000);
<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;
function saat(){
var zaman = new Date();
var saatim = zaman.toLocaleTimeString();
document.getElementById("saat").innerHTML= saatim;
}
var tekrarla = setInterval("saat();",1000);
function durdur(){
clearInterval(tekrarla);
}
<div id="saat"></div>
<button>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.
function saat(){
var zaman = new Date();
var saatim = zaman.toLocaleTimeString();
document.getElementById("saat").innerHTML= saatim;
}
setTimeout("saat();",5000);
<div id="saat"></div>
