JavaScript asinkron
"Aku akan menyelesaikannya nanti!"
Fungsi yang berjalan secara paralel dengan fungsi lain disebut asinkron
Contoh yang bagus adalah JavaScript setTimeout()
JavaScript asinkron
Contoh-contoh yang digunakan dalam bab sebelumnya, sangat disederhanakan.
Tujuan dari contoh ini adalah untuk mendemonstrasikan sintaks fungsi panggilan balik:
Contoh
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Pada contoh di atas, myDisplayeradalah nama dari sebuah fungsi.
Itu diteruskan myCalculator()sebagai argumen.
Di dunia nyata, panggilan balik paling sering digunakan dengan fungsi asinkron.
Contoh tipikal adalah JavaScript setTimeout().
Menunggu Waktu Habis
Saat menggunakan fungsi JavaScript setTimeout(), Anda dapat menentukan fungsi panggilan balik yang akan dijalankan pada waktu habis:
Contoh
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
Pada contoh di atas, myFunctiondigunakan sebagai callback.
myFunctionditeruskan setTimeout()sebagai argumen.
3000 adalah jumlah milidetik sebelum time-out, jadi
myFunction()akan dipanggil setelah 3 detik.
Saat Anda melewatkan fungsi sebagai argumen, ingatlah untuk tidak menggunakan tanda kurung.
Kanan: setTimeout(myFunction, 3000);
Salah:setTimeout(fungsiku(), 3000);
Alih-alih meneruskan nama fungsi sebagai argumen ke fungsi lain, Anda selalu dapat meneruskan seluruh fungsi sebagai gantinya:
Contoh
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Pada contoh di atas, function(){ myFunction("I love You !!!"); }
digunakan sebagai callback. Ini adalah fungsi yang lengkap. Fungsi lengkap diteruskan ke setTimeout() sebagai argumen.
3000 adalah jumlah milidetik sebelum time-out, jadi
myFunction()akan dipanggil setelah 3 detik.
Menunggu Interval:
Saat menggunakan fungsi JavaScript setInterval(), Anda dapat menentukan fungsi panggilan balik yang akan dijalankan untuk setiap interval:
Contoh
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
Pada contoh di atas, myFunctiondigunakan sebagai callback.
myFunctionditeruskan setInterval()sebagai argumen.
1000 adalah jumlah milidetik antara interval, jadi
myFunction()akan dipanggil setiap detik.
Menunggu File
Jika Anda membuat fungsi untuk memuat sumber daya eksternal (seperti skrip atau file), Anda tidak dapat menggunakan konten sebelum dimuat sepenuhnya.
Ini adalah waktu yang tepat untuk menggunakan panggilan balik.
Contoh ini memuat file HTML ( mycar.html), dan menampilkan file HTML di halaman web, setelah file dimuat penuh:
Menunggu Berkas:
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);
Pada contoh di atas, myDisplayerdigunakan sebagai callback.
myDisplayerditeruskan getFile()sebagai argumen.
Di bawah ini adalah salinan dari mycar.html:
mycar.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>