异步的 JavaScript
异步的 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);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 回调</h1>
<p>进行计算，然后显示结果。</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
</script>
</body>
</html>
运行结果：
Javascript 回调 进行计算，然后显示结果。 10
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在上面的例子中，myDisplayer 是函数的名称。
它作为参数传递给 myCalculator()。
在现实世界中，回调最常与异步函数一起使用。
一个典型的例子是 JavaScript setTimeout()。
等待超时
在使用 JavaScript 函数 setTimeout() 时，可以指定超时时执行的回调函数：
示例代码：
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 回调</h1>
<p>等待 3 秒（3000 毫秒）让此页面发生变化。</p>
<h1 id="demo"></h1>
<script>
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
</script>
</body>
</html>
运行结果：
Javascript 回调 等待 3 秒（3000 毫秒）让此页面发生变化。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在上面的示例中，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;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript SetTimeout()</h1>
<p>等待 3 秒（3000 毫秒）让此页面发生变化。</p>
<h1 id="demo"></h1>
<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
</script>
</body>
</html>
运行结果：
Javascript SetTimeout() 等待 3 秒（3000 毫秒）让此页面发生变化。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在上面的例子中，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();
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript setInterval()</h1>
<p>使用 setInterval() 显示时间，间隔为一秒（1000 毫秒）。</p>
<h1 id="demo"></h1>
<script>
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
</script>
</body>
</html>
运行结果：
Javascript setInterval() 使用 setInterval() 显示时间，间隔为一秒（1000 毫秒）。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在上面的例子中，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);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 回调</h1>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "/demo/js/mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(this.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
</script>
</body>
</html>
运行结果：
Javascript 回调汽车，现指自动车（英式英语：car；美式英语：automobile；美国口语：auto），即本身具有动力得以驱动前进，不须依轨道或电缆，得以动力行驶之车辆。广义来说，具有两轮或以上以原动机驱动之车辆，便可称其为汽车；狭义来说，仅指三或四轮以上，以热机驱动之车辆为汽车（亦是生活中所说之汽车）。第一辆全尺寸汽车由尼古拉·约瑟夫·居纽制造出来。而德国工程师卡尔·本茨则被为现代化汽车之父。本茨制造了三轮汽车以后，戈特利布·戴姆勒首先制造四轮汽车，美国人亨利·福特首先大量生产平价汽车，是使汽车得以普及化的人。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在上面的示例中，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>