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:


<p>Butona tıkla ve 3 saniye bekle</p>

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

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

<p>Butona tıkla ve 3 saniye bekle</p>

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

function uyariVer() {

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

}

</script>

Örnek 2:


<h1>Zamanlayıcı Örnek window.setTimeOut()</h1>
<button onclick="uyariVer();">3 saniye sonra uyarı ver</button>
<button onclick="zamanlamaIptal();">Zamanlamayı İptal Et</button>

<script>
var timerId;

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

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

function zamanlamaIptal() {
window.clearTimeout(timerId);
}
</script>

<h1>Zamanlayıcı Örnek window.setTimeOut()</h1>

<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);

}

</script>

Örnek 3:


<p>Sayfa yüklendikten 3 saniye sonra uyarı verecektir.</p> 
<div id="sonuc"></div> 
<script>

setTimeout(ornek,3000);

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

<p>Sayfa yüklendikten 3 saniye sonra uyarı verecektir.</p>

setTimeout(ornek,3000);

function ornek() {

document.getElementById("sonuc").innerHTML="Süre doldu.";

}

</script>

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>

<script>
var inervalID;

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

function uyariVer() {
alert("Merhaba Dünya!");
}
</script>

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

var inervalID;

function ornek() {

inervalID = setInterval(uyariVer, 3000);

}

function uyariVer() {

alert("Merhaba Dünya!");

}

</script>

Örnek 2:


<div id="panel"></div>
<button onclick="intervalCalistir();">Çalıştır</button>
<button onclick="intervalDurur();">Durdur</button>

<script>
var zId;

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

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

function intervalDurur() {
clearInterval(zId);
}
</script>

<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<br>";

}

function intervalDurur() {

clearInterval(zId);

}

</script>

Örnek 3:


<body onload="renkInterval()">

<script>
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+")";
}
</script>
</body>

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+")";

}

</script>

</body>

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:


<div id="hareket">x</div>
<script>
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);
</script>

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);

</script>

Örnek 2:


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

button {
position: absolute;
top: 20px;
left: 20px;
}
#stop {
left: 100px;
} 
</style>

<script> 

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

}
animateFrameId = requestAnimationFrame(oynat);

</script>

<style>

div {

width: 20px;

height: 20px;

background: #1DABB8;

float: left;

}

button {

position: absolute;

top: 20px;

left: 20px;

}

#stop {

left: 100px;

}

</style>

var animateFrameId;

function oynat() {

var element= document.createElement("div");

document.body.appendChild(element);

animateFrameId = requestAnimationFrame(oynat);

}

animateFrameId = requestAnimationFrame(oynat);

</script>

Örnek 3:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Animate Frame</title>


</head>

<body>

<style>
div {
width: 20px;
height: 20px;
float: left;
}

button {
position: absolute;
top: 20px;
left: 20px;
}
#stop {
left: 100px;
} 
</style>

<script> 

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);

</script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Animate Frame</title>

</head>

<body>

<style>

div {

width: 20px;

height: 20px;

float: left;

}

button {

position: absolute;

top: 20px;

left: 20px;

}

#stop {

left: 100px;

}

</style>

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);

</script>

</body>

</html>

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/

JavaScript Zamanlayıcı Kullanımı

window.setTimeout() Kullanımı

Parametreler

Dönüş Değeri

window.setInverval() Kullanımı

Parametreler

Dönüş Değeri

window.requestAnimationFrame() Kullanımı

Kaynaklar

İlgili

Yorum

Yorum Yap X

window.setTimeout() Kullanımı

Parametreler

Dönüş Değeri

window.setInverval() Kullanımı

Parametreler

Dönüş Değeri

window.requestAnimationFrame() Kullanımı

Kaynaklar

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X