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()
< button onclick="uyariVer();">3 saniye sonra uyarı ver< /button>
< button onclick="zamanlamaIptal();">Zamanlamayı İptal Et< /button>
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:
< button onclick="intervalCalistir();">Çalıştır< /button>
< button onclick="intervalDurur();">Durdur< /button>
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);