異步的 JavaScript

"I will finish later!"

與其他函數并行運行的函數稱為異步（asynchronous）

一個很好的例子是 JavaScript setTimeout()

異步 JavaScript

上一章中使用的例子做了很大地簡化。

其目的是演示回調函數的語法：

實例

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

親自試一試

在上面的例子中，myDisplayer 是函數的名稱。

它作為參數傳遞給 myCalculator()。

在現實世界中，回調最常與異步函數一起使用。

一個典型的例子是 JavaScript setTimeout()。

等待超時

在使用 JavaScript 函數 setTimeout() 時，可以指定超時時執行的回調函數：

實例

setTimeout(myFunction, 3000);
function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

親自試一試

在上面的示例中，myFunction 被用作回調。

函數（函數名）作為參數傳遞給 setTimeout()。

3000 是超時前的毫秒數，所以 3 秒后會調用 myFunction()。

當您將函數作為參數傳遞時，請記住不要使用括號。

正確：setTimeout(myFunction, 3000);

錯誤：setTimeout(myFunction(), 3000);

若不將函數的名稱作為參數傳遞給另一個函數，您始終可以傳遞整個函數：

實例

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

親自試一試

在上面的例子中，function(){ myFunction("I love You !!!"); } 用作回調。它是一個完整的函數。完整的函數作為參數被傳遞給 setTimeout()。

3000 是超時前的毫秒數，所以 3 秒后會調用 myFunction()。

等待間隔：

在使用 JavaScript 函數 setInterval() 時，可以指定每個間隔執行的回調函數：

實例

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

親自試一試

在上面的例子中，myFunction 用作回調。

函數（函數名）作為參數傳遞給 setInterval()。

1000 是間隔之間的毫秒數，因此 myFunction() 將每秒調用一次。

等待文件

如果您創建函數來加載外部資源（如腳本或文件），則在內容完全加載之前無法使用這些內容。

這是使用回調的最佳時機。

此例加載一個 HTML 文件 (mycar.html)，并在文件完全加載后在網頁中顯示該 HTML 文件：

等待文件：

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);

親自試一試

在上面的示例中，myDisplayer 用作回調。

函數（函數名）作為參數傳遞給 getFile()。

以下是 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>