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);
}
javascript
javascript settimeout
javascript settimeout metodu
javascript settimeout metodu kullanımı
x saniye sonra y çalışsın
x saniye sonra div açılsın
furkan yıldırım
<!--Spontane Sağ alt Reklam Kodu Başla-->
<style type="text/css">div.sagaltreklam{position:fixed;z-index:999900;}div.sagaltreklamkutu{bottom:10px;right:10px;margin-top:-125px;margin-left:-150px;width:300px;height:250px;background-color:#fff;border:4px solid #444;-moz-box-shadow: 0 0 12px 4px #888;-webkit-box-shadow: 0 0 12px 4px #888;box-shadow: 0 0 12px 4px #888;-webkit-border-radius: 4px;border-radius: 4px;}</style><style type="text/css">div. sagaltreklam {_position:absolute;}div. sagaltreklamkutu {_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style>
<Spontane>
</ Spontane ><br />
<div class=" sagaltreklam sagaltreklamkutu " id="rklmsg">
<a href="https://www.spontanecafe.com/"><img src="https://4.bp.blogspot.com/-lnmaSAgMJXQ/W_cR8-Ptq5I/AAAAAAAABEM/RuqgHFONGpoY6juD_fDSnUuvOlPlslboQCEwYBhgL/s200/reklamresmia.gif" style="border: none; height: 250px; margin: 0px; padding: 0px; width: 300px;" /></a>
<a href="javascript:void(0)" onclick="document.getElementById('rklmsg').style.display='none'" onfocus="this.blur();" style="background: transparent url("https://3.bp.blogspot.com/-2pNyEIhTbiU/UWJ-FMsZktI/AAAAAAAAUKg/3FPcPp0CNko/s1600/close-button.png") no-repeat top left; display: block; height: 29px; position: absolute; right: -17px; top: -15px; width: 29px;"></a>
</div>
<script>
function readCookie(cookieName) {
var re = new RegExp('[; ]'+cookieName+'=([^\\s;]*)');
var sMatch = (' '+document.cookie).match(re);
if (cookieName && sMatch) return unescape(sMatch[]);
return '';
}</script>
<script>
var kdukig = readCookie(' sagalt');
if (kdukig != '')
{
document.getElementById('rklmsg').style.display='none';
}
else {
var isim = 'sagalt';
var deger = 'kapali';
var gunler = 2;
if (gunler) {
var date = new Date();
date.setTime(date.getTime()+(gunler*24*60*60*1000));
var expires = "; expires="+date.toGMTString(); }
else var expires = "";
document.cookie = isim+"="+deger+expires+"; path=/";
}
</script>
<!--Spontane Sağ alt Reklam Kodu Bitiş-->
furkan yıldırım
Ana Sayfa
Paylaş
Oyla