异步的 JavaScript

vicky.yu

JS 回调
JS Promise
"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>