JavaScript 异步
异步是 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 请求的信息。