jQuery setInterval() ve setTimeOut() Kullanımı
Merhaba Arkadaşlar,
Bu makalede jQuery’nin süre bazlı çalışan iki özelliğinden bahsedeceğim. Belli bir süre sonunda veya tekrar eden işlemler için kullanabildiğimiz özellikler sayesinde saydırma ve tetikleyici sonuçlar oluşturabiliyoruz.
setInterval: Bu özellik ile bir işlemi belli süre aralıkları ile sonsuza kadar yineleyebiliyoruz. Örneğin bir dijital saat yaptığımızı düşünürsek dakika ve saniye alanlarını ayrı ayrı setInterval fonksiyonları içerisine alarak dakikayı 60 saniyede bir arttırıp saniyeyi de her 1 saniyede 1 artacak şekilde ayarlayabiliriz. Bir örnek ile bu özelliğin kullanımını da görelim.
Başlangıçtaki kod yapımız şu şekilde olmalıdır:
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org - jQuery setInterval() ve setTimeOut() Kullanımı</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
});
</script>
</head>
<body>
</body>
</html>
Id değeri “box-interval” olan bir div yaratıyoruz ve jQuery ile oluşturduğumuz bir değişkenin değerini her 1 saniyede bir arttırıp içerisine yazdırıyoruzz. Kodlar şu şekilde olmalıdır:
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org - jQuery setInterval() ve setTimeOut() Kullanımı</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
var interval = 0;
setInterval(function(){
interval ++;
$("#box-interval").html(interval);
},1000);
});
</script>
</head>
<body>
<div id="box-interval"></div>
</body>
</html>
setTimeOut: Bu özellik bize belli bir süre sonunda olması gereken işlemi tetikleme olanağı sağlamaktadır. Örneğin e-ticaret sitesi üzerinde bir ürün almak için ödeme tipi ve üyelik alanları gibi bir kaç sayfadan oluşan adımları geçmesi gereken bir kullanıcının herhangi bir sayfada 1 dakikadan daha uzun süre kalmamasını istiyoruz. Ve bekleme süresi 1 dakikayı geçerse de kullanıcıyı “hata.html” sayfasına yönlendirmek istiyoruz. İşte böyle bir durumda setTimeOut özelliğinden yararlanabiliyoruz. Küçük bir örnek ile kullanımını görelim.
setInterval için oluşturduğumuz sayfa içerisine şu javascript kodunu ekleyelim:
setTimeout(function(){
window.location.href="http://www.bilgisayaci.org";
},60000);
Sayfayı çalıştırdığımızda setInterval ile 1,2,3… şeklinde rakamların arttığını göreceğiz. Daha sonra 60. saniyeye gelindiğinde ise setTimeOut ile verdiğimiz komut sayesinde sayfa yönlendirilecektir.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 58 No ‘lu Maddeden İndirebilirsiniz..
Hocam paylaşımlarınızı beğeniyle takip ediyorum.
Emeğinize sağlık
Saygılar sunarım.