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:

Butona tıkla ve 3 saniye bekle

< button onclick="uyariVer()">Tıkla< /button>

function uyariVer() {
setTimeout(function(){ alert("Merhaba Dünya"); }, 3000);
}

Örnek 2:

Zamanlayıcı Örnek window.setTimeOut()

var timerId;

function uyariVer() {
timerId = window.setTimeout(zamanlayici, 3000);
}

function zamanlayici() {
alert("tıklama üzerinden 3000ms geçti");
}

function zamanlamaIptal() {
window.clearTimeout(timerId);
}

Örnek 3:

Sayfa yüklendikten 3 saniye sonra uyarı verecektir.

setTimeout(ornek,3000);

function ornek() {
document.getElementById("sonuc").innerHTML="Süre doldu.";
}

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:

< button onclick="ornek()">Çalıştır< /button>

var inervalID;

function ornek() {
inervalID = setInterval(uyariVer, 3000);
}

function uyariVer() {
alert("Merhaba Dünya!");
}

Örnek 2:

var zId;

function intervalCalistir() {
zId = setInterval(divYazdir, 1000);
}

function divYazdir() {
var panel = document.getElementById("panel");
panel.innerHTML +="Merhaba Dünya
";
}

function intervalDurur() {
clearInterval(zId);
}

Örnek 3:

var inervalID;

function renkInterval() {
inervalID = setInterval(uyariVer, 1000);
}

function uyariVer() {
var renk1= Math.floor(255*Math.random());
var renk2= Math.floor(255*Math.random());
var renk3= Math.floor(255*Math.random());
document.body.style.backgroundColor="rgb("+renk1+","+renk2+","+renk3+")";
}

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:

var baslangic = null;
var etiket = document.getElementById("hareket");
etiket.style.position = 'absolute';

function step(zaman) {
if (!baslangic) baslangic = zaman;
var progress = zaman - baslangic;
etiket.style.left = Math.min(progress/10, 200) + "px";
if (progress < 2000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);

Örnek 2:

div {
width: 20px;
height: 20px;
background: #1DABB8;
float: left;
}

button {
position: absolute;
top: 20px;
left: 20px;
}

#stop {
left: 100px;
}

var animateFrameId;
function oynat() {
var element= document.createElement("div");
document.body.appendChild(element);
animateFrameId = requestAnimationFrame(oynat);
}
animateFrameId = requestAnimationFrame(oynat);

Örnek 3:

div {
width: 20px;
height: 20px;
float: left;
}

button {
position: absolute;
top: 20px;
left: 20px;
}

#stop {
left: 100px;
}
var animateFrameId;
function oynat() {
var element= document.createElement("div");
document.body.appendChild(element);
var renk1= Math.floor(255*Math.random());
var renk2= Math.floor(255*Math.random());
var renk3= Math.floor(255*Math.random());
element.style.backgroundColor="rgb("+renk1+","+renk2+","+renk3+")";

animateFrameId = requestAnimationFrame(oynat);
}
animateFrameId = requestAnimationFrame(oynat);