Javascript setInterval, setInterval fonksiyonu Javascript tarafından en çok kullanılan fonksiyonlardan bir tanesidir amacı belirttiğimiz süre içerisinde sürekli olarak belirttiğim işleri yapması kısacası otomatik olarak kod bloklarımızı işletmek için kullanmaktayız.
Javascript setInterval Nedir, Örnekli Nasıl Kullanılır?
setInterval fonksiyonu Javascript tarafından en çok kullanılan fonksiyonlardan bir tanesidir amacı belirttiğimiz süre içerisinde sürekli olarak belirttiğim işleri yapması kısacası otomatik olarak kod bloklarımızı işletmek için kullanmaktayız.
Sözdizimi
1 | setInterval(fonksiyon,milisaniye,dil) |
Bu örneğimizde her üç saniyede bir ekrana Merhaba mesajı çıkartan bir uygulama yapalım.
Örnek Kullanım Kodu
1 2 3 | setInterval(function(){ alert("Merhaba") },3000); |
Üstteki örneğimizdede gördüğünüz gibi 3000 milisaniyede bir alert fonksiyonuyla ekrana Merhaba içerikli mesaj çıkarmaktadır.
İpuçları
- 1000 milisaniye = 1 saniyedir
- function kullanımı kodlarımızın işleyişi açısından zorunludur.
- milisaniye zorunlu olarak belirtilmelidir.
Örnek
Örneğimizde, html sayfamızda yer alan “Saymaya başla” adındaki buton’a tıklandığında output id’li html element’ine sayaç şeklinde her bir saniyede bir sayısal değeri arttırıp gösterimini sağlayacak. Durdur adındaki butonumuz ise clearInterval dediğimiz sayacın durdurulmasını sağlayacak metodumuzdur. Eğer saymaya devam etmesi istenirse tekrar “Saymaya başla” adındaki buton’a tıklanabilir.
Html Kodumuz
1 2 3 | <button onclick="startTimer()">Saymaya Başla</button> <button onclick="stopTimer()">Durdur</button> <div id="output">0</div> |
Javascript Kodumuz
1 2 3 4 5 6 7 8 9 10 11 12 | var number = 0; var timer = null function startTimer() { timer = setInterval(function () { number++; document.getElementById("output").innerText = number; }, 1000); } function stopTimer() { clearInterval(timer) } |
Demo
Üstteki demoda da görebileceğiniz gibi Tıkla adındaki html button türündeki element’e tıklama sonrası belirttiğimiz 3000ms yani 3sn sonra ekrana Tıklandı içeriğinde bir alert gösterimini sağlamış olduk.
📚 Benzer Kaynaklar
- Javascript Media Query Nedir ve Nasıl Kullanılır?
- Javascript array işlemleri için yardımcı olabilecek ipuçları
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.