Pazar , 28 Mayıs 2017
Anasayfa » JavaScript » JavaScript Zamanlayıcı Kullanımı

JavaScript Zamanlayıcı Kullanımı

JavaScript blokları genellikle eş zamanlı olarak yürütülür.  Fakat bazen keyfi olarak zamanlanmış bir şekilde kodlarınızın yürütülmesini isteyebilirsiniz. Bu işlemler için javascriptte doğal zamanlayıcı fonksiyonları mevcuttur. Bu yazıda bu fonksiyonların nasıl kullanıldığı örneklerle açıklanmıştır.

JavaScript zamanlayıcı işlevleri şunlardır. Genellikle de aşağıdaki işlemler için kullanılır.

  • setTimeout():  işlevinizin(fonksiyon) belirtilen gecikmeden sonra bir kez çalışmasını isterseniz kullanırsınız.
  • setInterval() : Animasyonlar gibi defalarca çalıştırılacak işlemler için kullanılır. belirtilen gecikmeden sonra fonksiyon tekrar çağrılır.
  • requestAnimationFrame() : Animasyon çağrımlarında kullanılır. Bir önceki boyamadan önce animasyonu gerçekleştirecek fonksiyonun çağrılmasını sağlar. Animasyonlarda yeniden boyama ve akış döngüsünü optimize eder.

 

window.setTimeout() Kullanımı

Zamanlayıcı sona erdikten sonra bir işlev yürütülmesini sağlar.

var TimerId = window.setTimeout(fonk[, gecikme, param1, param2, …]);

Parametreler

fonk: gecikme sonunda çalıştırılacak fonksiyon

gecikme: fonksiyonun çalıştırılması için gerekli olan süreyi ifade eder.

param1, param2, : fonksiyona gönderilecek parametreleri ifade eder.

Dönüş Değeri

TimerId : setTimeOut() metodu tarafından tanımlanan sıfır dışında eşsiz bir değeri ifade eder.  Bu değer window.clearTimeout() metodu tarafından zamanlayıcıyı iptal etmek için kullanılır.

Örnek 1:

Örnek 2:

Örnek 3: 

 

window.setInverval() Kullanımı

Her çağrı arasında sabit bir geçikme ile bir kod parçası yada bir fonksiyonu çalıştırır.

var intervalID = window.setInterval(func, delay[, param1, param2, …]);

Parametreler

fonk: gecikme sonunda çalıştırılacak fonksiyon

gecikme: fonksiyonun çalıştırılması için gerekli olan süreyi ifade eder.

param1, param2, : fonksiyona gönderilecek parametreleri ifade eder.

Dönüş Değeri

intervalID : window.setInterval() metodu tarafından tanımlanan sıfır dışında eşsiz bir değeri ifade eder.  Bu değer window.clearInterval() metodu tarafından zamanlayıcıyı iptal etmek için kullanılır.

 

Örnek 1:

 

Örnek 2:

 

Örnek 3:

 

window.requestAnimationFrame() Kullanımı

JavaScriptte zamanlanmış işlevleri gerçekleştirmek için setInterval metodu kullanılırdı. İstenilen hızda animasyonları gerçekleştirmek için (saniyede 50 kareden fazla gösterilmek istenirse) artık window.requestAnimationFrame kullanılır.

window.requestAnimationFrame(fonk);

fonk:  Performance.now() metodu tarafından şuanki sistem zamanını ifade eden tek ve yanlız bir sayıyı parametre olarak alan fonksiyonu ifade eder.

 

Örnek 1:

Örnek 2:

 

Örnek 3:

 

Kaynaklar

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

css-tricks.com/using-requestanimationframe/

 

Hakkında Hayri

İlginizi Çekebilir

JQuery Checked Kullanımı

Bu örneğimizde JQuery ile checkbox kullanarak resim gizleyip göstermeyi yapacağız. Bunun için ilk olarak JQuery’nin sitesinden …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir