JavaScript 异步

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

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

JavaScript 很多场景下用到异步,比如:

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

超时后执行

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

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

setTimeout(myFunction, 3000);

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

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

  1. 第 1 个参数是回调函数,用作指定的时间后要执行的操作
  2. 第 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. 第 1 个参数是回调函数,用作每隔指定的时间要执行的操作
  2. 第 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 请求的信息。