JavaScript yang bersifat asynchronous

"Saya akan selesai nanti!"

Fungsi yang berjalan bersamaan dengan fungsi lain disebut asinkron (asynchronous)

Sebuah contoh yang bagus adalah JavaScript setTimeout()

JavaScript asinkron

Contoh yang digunakan di bab sebelumnya telah diarsin seberapa besar.

Tujuannya adalah untuk menunjukkan sintaks balikan 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);

亲自试一试

Dalam contoh di atas,myDisplayer adalah nama fungsi.

dipasang sebagai parameter kepada myCalculator()。

Dalam dunia nyata, balikan paling sering digunakan bersamaan dengan fungsi asinkron.

Sebuah contoh yang biasa adalah JavaScript setTimeout()。

Menunggu timeout

Dalam penggunaan fungsi JavaScript, setTimeout() Pada saat ini, anda dapat menentukan fungsi balikan yang akan dijalankan saat timeout:

Contoh

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

亲自试一试

在上述示例中，myFunction digunakan sebagai balikan.

函数（函数名）作为参数传递给 setTimeout()。

3000 adalah masa tamat masa dalam milidetik, jadi 3 saat kemudian akan dipanggil myFunction()。

Ketika anda mengirimkan fungsi sebagai parameter, ingat jangan gunakan kurung kurawal.

Benar: setTimeout(myFunction, 3000);

Kesalahan: setTimeout(myFunction(), 3000);

Jika anda tidak memasukkan nama fungsi sebagai parameter kepada fungsi lain, anda masih dapat memasukkan fungsi penuh:

Contoh

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

亲自试一试

Dalam contoh di atas,function(){ myFunction("Saya cinta kamu !!!"); } digunakan sebagai balik kembali. Ia adalah fungsi yang penuh. Fungsi yang penuh dipasang ke dalam setTimeout().

3000 adalah masa tamat masa dalam milidetik, jadi 3 saat kemudian akan dipanggil myFunction()。

Tunggu penghantaran:

Dalam penggunaan fungsi JavaScript, setInterval() dalam masa, anda boleh tentukan fungsi balik kembali yang dijalankan setiap penghantaran:

Contoh

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

亲自试一试

Dalam contoh di atas,myFunction 用作回调。

函数（函数名）作为参数传递给 setInterval()。

1000 adalah masa antara penghantaran dalam milidetik, jadi myFunction() akan dipanggil sekali setiap detik.

Tunggu fail

Jika anda membuat fungsi untuk memuat turun sumber luaran (seperti skrip atau fail), anda tidak dapat menggunakan kandungan ini sebelum kandungan ini kewalahan sepenuhnya.

Ini adalah masa yang terbaik untuk menggunakan balik kembali.

Paparkan fail HTML ini (mycar.html), dan paparkan fail HTML ini di halaman web selepas fail kewalahan sepenuhnya:

Tunggu fail:

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

亲自试一试

在上述示例中，myDisplayer 用作回调。

函数（函数名）作为参数传递给 getFile()。

Berikut adalah mycar.html 的副本：

mycar.html

<img src="img_car.jpg" alt="Kereta yang bagus" style="lebar:100%">
<p>Sebuah kereta adalah kendaraan bermotor yang berputar, bertenaga sendiri, digunakan untuk pertambangan.</p>
<p>Bahasa Melayu: Kebanyakan definisi istilah ini menentukan bahawa kereta dirancang untuk beroperasi utamanya di jalan, untuk mempunyai tempat duduk untuk satu hingga lapan orang, untuk biasanya mempunyai empat roda.</p>
<p>(Wikipedia)</p>