Bu makalemizde JavaScript web programlama dilinde çokça kullanılan bir fonksiyon olan setTimeout metodunu inceleyeceğiz. Makaleye giriş yapabilmek için öcelikle setTimeout metodunun ne işe yaradığını ve ne zaman kullanıldığını açıklamaya çalışacağım. setTimeout metodunun mantığını açıkladıktan sonra da bu metodun kullanımı ile ilgili örneklere değinerek konunun daha da pekişmesini sağlamaya çalışacağız.setTimeout metodu ismindeki time sözünden de anlaşılacağı gibi fonksiyonların ve ya belirli bir işin zamanlaması ile alakalı bir konudur. Temel kullanım şeklini, delay mantığına da benzetebiliriz. Örneğin, belirli bir iş yaparken bu işin hemen değil kodu okuduktan belirli bir süre sonra çalışmasını sağlamak istiyorsak setTimeout komutu bizim için vazgeçilmez çözümlerden biri olacaktır. Örneğin kullanıcının bir işlemi başlattıktan sonra 1 dakika içerisinde işlem yapmazsa tıklayacağı butonu deaktif etmek istiyorsanız aradığınız çözüm setTimeout metodu olabilir.
Bu noktada biraz da genel olarak JavaScript'in kodları okuma, önbelleğe alma ve çalıştırma mantığından bahsetmemiz gerekiyor. JavaScript bir js dosyasında kodları sırayla okur ve bunları önbelleğe alır. Biz bu metotları tetiklediğimizde veya bu metotlar başka yerlerden çağrıldığında devreye girerler. İşte bu nedenlerden dolayı bazen kodları okuma sırasında değil de belirli bir süre sonra işlem yapma ihtiyacı duyduğumuzda setTimeout metodu en iyi yardımcımız olabilir.
Örnek bir senaryo üzerinden devam ederek konuyu daha da açıklamaya çalışalım. Örneğin kullanıcının mail adresine bir doğrulama kodu gönderdiniz ve bu doğrulama kodunun belirli bir sürede girmesini bekliyorsunuz. Örneğin kullanıcı 10 dakika içerisinde doğrulama kodunu girmezse kullanıcıya tekrar mail adresini girmesini istiyorsunuz. Bu işlem için kullanabileceğiniz çözümlerden bir tanesi mail gönderdikten sonra setTimeout metodunu çağırmak ve bu zamanlama sıfırlanmadığı sürece saymasını beklemek olacaktır.
Örnekleri vermiş olsam da kod üzerinden de bunu açıklamanın daha kullanışlı ve anlaşılabilir olabileceğini düşündüm. Öncelikle basit bir örnekle başlayalım ve ekran içinde her hangi bir yere tıklandındaktan 10 saniye sonra ekrana "10 saniye önce ekran içindeki bir yere tıklandı" yazalım. Bu işlem için yazdığım kodlar aşağıdadır. html tagını almak için JQuery kullandım. İsterseniz document.getElementsByTagName metodunu da kullanabilirsiniz
$('html').click(function (e) {
setTimeout(alertMessage(), 10000);
});
function alertMessage(){
alert("10 saniye önce ekran içindeki bir yere tıklandı");
}
Bu örnek aslında setTimeout metodunun anlaşılması için yeterli ve kodu siz de denediğinizde 10 saniye sonra mesajın ekranda gözüktüğünü görecekseniz.
Verdiğim örnekte diğer önemli noktalardan bir tanesi ise yapacağınız işlemin kaç satır olmasına bakmayarak her zaman başka bir metodu çağırmanın kod okunabilirliğini artıracağı gerçeğidir. Örneğin bu işlem için metod ismini yazdığım yere direk alert("mesaj") şeklinde bir yazım da tercih edebilirdim. Ama ister sizin daha sonra kendi yazdığınız kodu anlayabilmeniz, isterse de diğer kişilerin sizin kodlarınızı anlayabilmesi için her zaman yapılacak işlemleri ayrı bir metoda almak çok önemlidir.
setTimeout metodunun kullanımı ile ilgili diğer önemli olan nokta metod ve gecikme sürelerinin ayarlanmasıdır. Metodun örnek kullanımında da gördüğünüz gibi bu metodun iki parametresi vardır. Bunlardan birinci çağırılacak metod, ikincisi ise milisaniye cinsinden ne kadar süre sonra kodun çalıştırılacağı parametresidir. Yani örneğin 1 dakika sonra çalıştırmasını istiyorsak süre olarak 60000 değerini girmemiz gerekiyor.
Son olarak konuyu özetleyecek olursak setTimeout metodu belirli işlemin gecikmelerle yapılmasını sağlamak için kullanılmaktadır. Metod parametre olarak metod ismini ve gecikme süresini almakta ve kod okunduktan gecikme süresi kadar sonra metodu çalıştırmaktadır.
Verdiğim örnek ve açıklamalarla birlikte konunun anlaşılabildiğini düşünüyorum. Yine de konuyla alakalı sorularınız olursa bana yazmaktan çekinmeyin. Fırsat buldukça yanıtlamaya çalışacağım...
Konuyla Alakalı Diğer Makaleler:
- JavaScript Zamanlanama Fonksiyonları
- JavaScript setTimeout Kullanımı
- JavaScript clearTimeout Kullanımı
- JavaScript setInterval() Metodu Kullanımı
- JavaScript clearInterval Kullanımı
Yorumlar
Yorum Gönder