JavaScript Zamanlama Olayları
|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript zaman aralıklarında çalıştırılabilir. Buna zamanlama olayları denir. |
Zamanlama Etkinlikleri
Nesne window, belirli zaman aralıklarında kodun yürütülmesine izin verir.
Bu zaman aralıklarına zamanlama olayları denir.
JavaScript ile kullanılacak iki temel yöntem şunlardır:
setTimeout(function, milliseconds)
Belirtilen sayıda milisaniye bekledikten sonra bir işlevi yürütür.setInterval(function, milliseconds)
setTimeout() ile aynıdır, ancak işlevin yürütülmesini sürekli olarak tekrarlar.
ve setTimeout()her setInterval()ikisi de HTML DOM Window nesnesinin yöntemleridir.
setTimeout() Yöntemi
window.setTimeout(function, milliseconds);
Yöntem window.setTimeout(), pencere öneki olmadan yazılabilir.
İlk parametre yürütülecek bir fonksiyondur.
İkinci parametre, yürütmeden önceki milisaniye sayısını gösterir.
Örnek
Bir düğmeyi tıklayın. 3 saniye bekleyin, sayfa "Merhaba" uyarısını verecektir:
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Yürütme Nasıl Durdurulur?
Yöntem clearTimeout(), setTimeout() içinde belirtilen işlevin yürütülmesini durdurur.
window.clearTimeout(timeoutVariable)
Yöntem window.clearTimeout(), pencere öneki olmadan yazılabilir.
Yöntem clearTimeout(), döndürülen değişkeni kullanır setTimeout():
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
İşlev henüz yürütülmediyse, clearTimeout()
yöntemi çağırarak yürütmeyi durdurabilirsiniz:
Örnek
Yukarıdakiyle aynı örnek, ancak eklenmiş bir "Durdur" düğmesi ile:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
setInterval() Yöntemi
Yöntem setInterval(), verilen her zaman aralığında belirli bir işlevi tekrarlar.
window.setInterval(function, milliseconds);
Yöntem window.setInterval(), pencere öneki olmadan yazılabilir.
İlk parametre çalıştırılacak fonksiyondur.
İkinci parametre, her yürütme arasındaki zaman aralığının uzunluğunu gösterir.
Bu örnek, "myTimer" adlı bir işlevi saniyede bir kez yürütür (dijital saat gibi).
Örnek
Geçerli saati göster:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Bir saniyede 1000 milisaniye vardır.
Yürütme Nasıl Durdurulur?
Yöntem clearInterval(), setInterval() yönteminde belirtilen işlevin yürütülmesini durdurur.
window.clearInterval(timerVariable)
Yöntem window.clearInterval(), pencere öneki olmadan yazılabilir.
Yöntem clearInterval(), döndürülen değişkeni kullanır setInterval():
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Örnek
Yukarıdakiyle aynı örnek, ancak bir "Zamanı durdur" düğmesi ekledik:
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>