JavaScript Asinkron

"Saya akan selesai nanti!"

Fungsi yang berjalan bersama-sama dengan fungsi lain disebut asinkron (asynchronous)

Sebuah contoh yang bagus adalah JavaScript setTimeout()

JavaScript asinkron

Misalnya di bab sebelumnya telah di simpulkan secara besar-besaran.

Tujuannya adalah untuk menunjukkan sintaks callback fungsi:

Contoh

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

Coba Sendiri

Pada contoh di atas,myDisplayer adalah nama fungsi.

dipergunakan sebagai parameter ke myCalculator()。

Dalam dunia nyata, callback paling sering digunakan bersama dengan fungsi asinkron.

Sebuah contoh tipikal adalah JavaScript setTimeout()。

Menunggu timeout

Dalam penggunaan fungsi JavaScript setTimeout() Dalam hal ini, Anda dapat menentukan fungsi yang akan dieksekusi saat timeout:

Contoh

setTimeout(myFunction, 3000);
function myFunction() {
  document.getElementById("demo").innerHTML = "Saya mencintai kamu !!";
}

Coba Sendiri

Dalam contoh di atas,myFunction digunakan sebagai callback.

Fungsi (nama fungsi) dikirim sebagai parameter ke setTimeout()。

3000 adalah jumlah milidetik sebelum timeout, jadi 3 detik kemudian akan dipanggil myFunction()。

Ketika Anda mengirimkan fungsi sebagai parameter, ingat jangan gunakan kurung.

Benar: setTimeout(myFunction, 3000);

Kesalahan: setTimeout(myFunction(), 3000);

Jika tidak mengirimkan nama fungsi sebagai parameter ke fungsi lain, Anda selalu dapat mengirimkan fungsi secara penuh:

Contoh

setTimeout(function() { myFunction("Saya mencintai kamu !!!"); }, 3000);
function myFunction(value) {}}
  document.getElementById("demo").innerHTML = value;
}

Coba Sendiri

Pada contoh di atas,function(){ myFunction("Saya sayang kamu !!!"); } digunakan sebagai callback. Ini adalah fungsi yang lengkap. Fungsi yang lengkap dijadikan parameter untuk di passing ke setTimeout().

3000 adalah jumlah milidetik sebelum timeout, jadi 3 detik kemudian akan dipanggil myFunction()。

Tunggu interval:

Dalam penggunaan fungsi JavaScript setInterval() dalam setiap interval, dapat ditentukan fungsi callback yang dieksekusi:

Contoh

setInterval(myFunction, 1000);
function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

Coba Sendiri

Pada contoh di atas,myFunction digunakan sebagai callback.

Fungsi (nama fungsi) dikirim sebagai parameter ke setInterval()。

1000 adalah jumlah milidetik antara interval, jadi myFunction() akan dipanggil setiap detik.

Tunggu berkas

Jika Anda membuat fungsi untuk memuat sumber eksternal (seperti skrip atau berkas), Anda tidak dapat menggunakan konten ini sebelum konten sepenuhnya terload.

Ini adalah waktu yang terbaik untuk menggunakan callback.

Pada contoh ini, memuat berkas HTML (mycar.html)，dan tampilkan berkas HTML di halaman web setelah berkas sepenuhnya terload：

Tunggu 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("Kesalahan: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

Coba Sendiri

Dalam contoh di atas,myDisplayer digunakan sebagai callback.

Fungsi (nama fungsi) dikirim sebagai parameter ke getFile()。

Berikut adalah mycar.html salinannya:

mycar.html

<img src="img_car.jpg" alt="Mobil Bagus" style="width:100%">
<p>Mobil adalah kendaraan bermotor berroda, yang beroperasi mandiri, digunakan untuk transportasi.</p>
<p>Sebagian besar definisi istilah menentukan bahwa mobil dirancang untuk beroperasi utamanya di jalan, untuk memiliki tempat duduk untuk satu sampai delapan orang, untuk biasanya memiliki empat roda.</p>
<p>(Wikipedia)</p>