Eşzamansız JavaScript
"Sonra bitiririm!"
Diğer işlevlerle paralel olarak çalışan işlevlere eşzamansız denir.
İyi bir örnek JavaScript setTimeout()
Eşzamansız JavaScript
Önceki bölümde kullanılan örnekler çok basitleştirildi.
Örneklerin amacı, geri arama işlevlerinin sözdizimini göstermekti:
Örnek
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Yukarıdaki örnekte myDisplayer, bir fonksiyonun adıdır.
myCalculator()Bir argüman olarak iletilir .
Gerçek dünyada, geri aramalar çoğunlukla asenkron işlevlerle kullanılır.
Tipik bir örnek JavaScript'tir setTimeout().
Zaman Aşımı Beklemek
JavaScript işlevini kullanırken, setTimeout()zaman aşımına uğradığında yürütülecek bir geri arama işlevi belirtebilirsiniz:
Örnek
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
Yukarıdaki örnekte, myFunctiongeri arama olarak kullanılmıştır.
myFunctionsetTimeout()argüman olarak iletilir .
3000, zaman aşımından önceki milisaniye sayısıdır, bu nedenle
myFunction()3 saniye sonra çağrılır.
Bir işlevi argüman olarak ilettiğinizde parantez kullanmamayı unutmayın.
Sağ: setTimeout(myFunction, 3000);
Yanlış:setTimeout(myFunction(), 3000);
Bir işlevin adını başka bir işleve bağımsız değişken olarak iletmek yerine, bunun yerine her zaman bir işlevin tamamını iletebilirsiniz:
Örnek
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Yukarıdaki örnekte, function(){ myFunction("I love You !!!"); }
geri arama olarak kullanılmıştır. Tam bir fonksiyondur. Tam işlev, bir argüman olarak setTimeout() öğesine iletilir.
3000, zaman aşımından önceki milisaniye sayısıdır, bu nedenle
myFunction()3 saniye sonra çağrılır.
Aralıkları Beklemek:
JavaScript işlevini kullanırken, setInterval()her aralık için yürütülecek bir geri arama işlevi belirtebilirsiniz:
Örnek
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
Yukarıdaki örnekte, myFunctiongeri arama olarak kullanılmıştır.
myFunctionsetInterval()argüman olarak iletilir .
1000, aralıklar arasındaki milisaniye sayısıdır, bu nedenle
myFunction()her saniye çağrılır.
Dosyalar Bekleniyor
Harici bir kaynağı (komut dosyası veya dosya gibi) yüklemek için bir işlev oluşturursanız, içeriği tam olarak yüklenmeden kullanamazsınız.
Geri arama kullanmak için mükemmel bir zaman.
Bu örnek mycar.html, bir HTML dosyası ( ) yükler ve dosya tamamen yüklendikten sonra HTML dosyasını bir web sayfasında görüntüler:
Dosya Bekleniyor:
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(this.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
Yukarıdaki örnekte, myDisplayergeri arama olarak kullanılmıştır.
myDisplayergetFile()argüman olarak iletilir .
Aşağıda bir kopyası var mycar.html:
arabam.html
<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people, to typically have four wheels.</p>
<p>(Wikipedia)</p>