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.

İçerik göster

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

setInterval(fonksiyon,milisaniye,dil)

1	setInterval(fonksiyon,milisaniye,dil)

Bu örneğimizde her üç saniyede bir ekrana Merhaba mesajı çıkartan bir uygulama yapalım.

Örnek Kullanım Kodu

setInterval(function(){
   alert("Merhaba")
},3000);

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

<button onclick="startTimer()">Saymaya Başla</button>
<button onclick="stopTimer()">Durdur</button>
<div id="output">0</div>

<button onclick="startTimer()">Saymaya Başla</button>

<button onclick="stopTimer()">Durdur</button>

Javascript Kodumuz

var number = 0;
var timer = null
function startTimer() {
  timer = setInterval(function () {
    number++;
    document.getElementById("output").innerText = number;
  }, 1000);
}

function stopTimer() {
  clearInterval(timer)
}

var number = 0;

var timer = null

function startTimer() {

timer = setInterval(function () {

number++;

document.getElementById("output").innerText = number;

}, 1000);

}

function stopTimer() {

clearInterval(timer)

}

Demo

<br> See the Pen <a href="https://codepen.io/muratoner-the-typescripter/pen/PoppaaL" target="_blank" rel="noopener">Javascript setInteval Example</a> by Murat ÖNER<br> (<a href="https://codepen.io/muratoner-the-typescripter" target="_blank" rel="noopener">@muratoner-the-typescripter</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br>

Ü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

✍ 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.

5/5 - (2 votes)

Kategoriler

Bloga e-posta ile abone ol

Javascript setInterval Nedir, Örnekli Nasıl Kullanılır?