JavaScript 异步

异步是 JavaScript 中很重要的一个概念。同步和异步是一组相对的概念。简单的理解，同步是指程序按照先后顺序，异步则是多个程序可以同时执行。

JavaScript 很多场景下用到异步，比如：

等待几秒后执行某个操作
按时间间隔执行某个操作
异步加载一个文件

超时后执行

setTimeout() 函数可以在指定的超时时间后执行指定的回调函数。

使用 setTimeout() 延时显示一段信息：

setTimeout(myFunction, 3000);

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

setTimeout() 函数需要两个参数：

第 1 个参数是回调函数，用作指定的时间后要执行的操作
第 2 个参数是超时时间，单位是毫秒，比如例子中的 3000 代表 3 秒。

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

setTimeout() 第 1 个参数也可以直接传递一个匿名函数：

setTimeout(function () {
  myFunction("I love You !!!");
}, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

在上面的例子中，function(){ myFunction("I love You !!!"); } 是一个匿名函数，用作超时后的回调函数。

间隔执行

setInterval() 函数时可以每隔指定的时间段执行指定的回调函数。

使用 setInterval() 动态的显示时间：

setInterval(myFunction, 1000);

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

setInterval() 函数需要两个参数：

第 1 个参数是回调函数，用作每隔指定的时间要执行的操作
第 2 个参数是时间间隔，单位是毫秒，比如例子中的 1000 代表 1 秒。

异步请求

如果想加载一个外部的资源（比如脚本、图片、文件等），必须等外部资源完全加载完毕后才能使用。

如果想动态的获取一些服务器的数据，必须等请求完成后才能使用服务器返回的数据。

而什么时候外部资源完全加载完毕，或者什么时候服务器返回数据，我们却无法得知。

Ajax 为我们提供了一个解决方案，将我们的回调函数放在绑定到请求完成的事件函数中，当请求完成的时候，就会主动调取我们设定的回调函数。

下面的示例动态加载一个 async.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 用作回调。

async.html 文件内容：

<h1>Hello World</h1>
<p>我是异步加载进来的数据。。。</p>

跳转到 JavaScript AJAX 章节获取更多关于 AJAX 请求的信息。

JavaScript 异步

超时后执行

间隔执行

异步请求

目录