异步 JavaScript

"I will finish later!"

函数运行于平行线与其他函数一起调用异步

JavaScript setTimeout() 就是一个很好的例子

异步 JavaScript

上一章中使用的示例非常简单。

这些示例的目的是演示回调函数的语法：

示例

function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}

function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

亲自试一试 »

在上面的例子中，myDisplayer是函数的名称。

它被传递到myCalculator()作为一个论点。

在现实世界中，回调最常与异步函数一起使用。

一个典型的例子是 JavaScriptsetTimeout()。

等待超时

使用 JavaScript 函数时setTimeout()，您可以指定超时时执行的回调函数：

示例

setTimeout(myFunction, 3000);

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

亲自试一试 »

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

myFunction被传递给setTimeout()作为一个论点。

3000是超时前的毫秒数，所以myFunction()3秒后将被调用。

笔记

当您将函数作为参数传递时，请记住不要使用括号。

右：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是超时前的毫秒数，所以myFunction()3秒后将被调用。

等待间隔：

使用 JavaScript 函数时setInterval()，您可以指定每个间隔执行的回调函数：

示例

setInterval(myFunction, 1000);

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

亲自试一试 »

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

myFunction被传递给setInterval()作为一个论点。

1000 是间隔之间的毫秒数，所以myFunction()每秒都会被调用。

回调替代方案

通过异步编程，JavaScript 程序可以启动长时间运行的任务，并继续并行运行其他任务。

但是，异步程序很难编写，也很难调试。

因此，大多数现代异步 JavaScript 方法不使用回调。相反，在 JavaScript 中，异步编程是通过使用承诺反而。

笔记

您将在本教程的下一章中了解 Promise。