JavaScript SetInterval ve SetTimeOut Kullanımı

Herkese merhabalar, bu yazımda sizlere JavaScript’te setInterval ve setTimeOut nasıl kullanılır amaçları nelerdir bunlardan bahsedeceğim.

Öncelikle setTimeOut ile başlamak istiyorum. setTimeOut fonksiyonu içine yazacağımız eylemin, parametresinde belirlediğimiz milisaniye cinsinden süre kadar geciktirilerek başlamasını sağlar. Yani bu şu demek oluyor. Mesela siz alert’ü kullanarak ekrana ‘Merhaba Dünya’ yazdırmak istiyorsunuz ama bu siteniz render edilir edilmez yapılsın istemiyorsunuz diyelim. Bunu yapmak setTimeOut ile mümkün. Tek yapmanız gereken milisaniye cinsinden ne kadar geç başlamasını istediğinizi belirlemek ve bunu yazmak. Gelin lafı fazla uzatmadan bu uygulamanın kodlarını inceleyelim.

Yukarıdaki kod parçacığında gördüğümüz gibi setTimeOut içerisine iki tane parametre alıyor. İlki bir fonksiyon ve ikincisi ise milisaniye cinsinden geciktirmek istediğimiz süre.

İlk parametredeki fonksiyonun içerisine yapmak istediğimiz işlemi giriyoruz. Ne yapmak istiyorduk? alert ile ekrana Merhaba Dünya yazdıracaktır. Bunu oraya girdik. İkinci parametreye ise ben iki saniye gecikmesini istiyorum bu yüzden 2000 yazdım. Kodumuzu çalıştırdığımız zaman iki saniye sonra ekrana alert ile Merhaba Dünya yazdıracaktır. İşte setTimeOut fonksiyonu bu kadar basit..

Gelelim şimdi diğerine setInterval’a.. Bunun amacı ise milisaniye cinsinden belirtilen süre geçtikçe fonksiyon içinde belirtilen işlemi sürekli yenilemek.

Interval’in kullanımı da setTimeOut’un aynısı. İki tane parametre giriyoruz. İlkinde yapılacak işlemin olduğu bir fonksiyon, ikincisinde ise işlemin ne kadar sürede bir tekrarlanacağı anlamına gelen milisaniye cinsinden zamanımızı giriyoruz. Ben örnek olarak bir tane i değişkeni tanımlayacağım. Bu i’yi setInterval’in içinde root id’li divime yadıracağım. Her bir saniyede bir de i değişkenini bir arttıracağım. Ayrıca btn idli bir buton tanımlayacağım ve bu butona tıkladığımızda interval işlemini durduracağım. Lafı fazla uzatmadan kodumuzu inceleyelim.

Yukarıdaki kodu baştan sona kadar inceleyerek öğrenelim. ilk önce i isimli bir değişken tanımladık. Değişkenimize 0 değerini atadık. Ardından root isimli bir değişken tanımlayarak root idli divimizi seçtik. Onun ardından ise Interval isimli bir değişken oluşturduk ve içine setInterval fonksiyonumuzu atadık. Ardından setInterval’in ilk parametresine i değişkenimizi birer birer arttıracak ve bunu root divine yazdıracak olan fonksiyonumuzu ekledik. İkinci parametreye ise milisaniye cinsinden ne kadar sürede bir bu işlemin tekrarlanacağını tanımladık yani 1000 milisaniyede (1 saniye) bir olacak şekilde tanımladık.

Ardından btn isimli bir değişken tanımlayıp içine btn idli butonumuzu atadık. Bundan sonra ise btn değişkenimize click eventListener’ını ekledik ve fonksiyon olarak clearInterval fonksiyonumuzu içine atadık. clearInterval’in içine ise setInterval’imizin içinde olduğu Interval değişkenimizi yazdık. Bu da şu anlama geliyor. Bu butona tıklandığı zaman setInterval işlemi durdurulsun.

İşte iki fonksiyonunda olayı bu kadar basit. Umarım faydalı bir yazı olmuştur. Herkese iyi bir gün diliyorum..