JavaScript异步编程详解
一、异步与同步的概念
1、同步编程
计算机一行一行按照顺序依次执行代码,如果当前的代码任务耗时执行了,那么会阻塞后续代码的执行。
同步编程是一种典型的请求-响应模型,当请求调用一个函数或者方法,需要等待其响应返回才能执行后续的代码
应用:传统的单线程编程
2、异步编程
多任务并发执行+返回结果
利用线程的概念来理解:
每一个线程做一件事,不同的线程中可以执行不同的任务
或者使用主子线程来理解(菜鸟教程):
从主线程(线程1、线程2)发射子线程(任务1、任务2、任务3)来完成任务,不同的主线程发射不同的子线程来执行任务。
使用线程与线程池来理解:
多线程处理,处理过程中将任务添加到线程队列中
JavaScript是单线程的,这个单线程指的是执行线程的时候是单线程执行的。单线程在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行。
所以我们如果要使用异步编程,就必须使用多个任务并发执行(在同一时间段内,多任务同时进行着,但是某一时刻,只有某一 任务执行)
二、什么时候使用异步编程
一般情况下,同步编程,代码按照顺序依次执行,能够很好地保证程序的执行。
缺点:
不适用于需要执行长时间运行的任务的情况,例如从服务器获取数据或进行复杂的计算。在这些情况下,我们不希望阻塞用户界面,因为这会使网站看起来卡顿,甚至无响应。
为了避免这种情况,我们需要使用JavaScript中的异步编程技术。异步编程是JavaScript中的一个核心概念,它使我们能够在执行长时间运行的任务时不会阻塞用户界面,而是在任务完成后立即返回结果。
详解:
比如:读取文件内容或者请求服务器接口数据,需要根据返回的数据内容执行后续的操作,读取文件内容和请求接口直到数据返回这一过程是需要时间的,网络越差,耗费时间越长。
如果按照同步编程方式实现,在等待数据返回这段时间,JavaScript 是不能处理其他任务的,此时页面的交互,滚动等任何操作也都会被阻塞,这显然是极其不友好,不可接受的。
再比如:如果我们需要通过Ajax请求数据来渲染页面(前端中很常见的渲染页面的方式),如果用同步方式请求页面,每当发送请求,浏览器就会锁死,不可以进行其他操作,用户体验极差。
异步编程是JavaScript中的一个核心概念,它使我们能够在执行长时间运行的任务时不会阻塞用户界面,而是在任务完成后立即返回结果。(即请求后,不需要等待响应返回, 可以继续执行其他任务,而在响应返回时,会得到通知,执行回调或事件处理程序。)
深入理解(以主子线程来说):
使用子线程完成一些可能消耗时间足够长以至于被用户察觉的事情,比如读取一个大文件或者发出一个网络请求。
子线程独立于主线程,所以即使出现阻塞也不会影响主线程的运行。
但是子线程有一个局限:一旦发射了以后就会与主线程失去同步,我们无法确定它的结束,如果结束之后需要处理一些事情,比如处理来自服务器的信息,我们是无法将它合并到主线程中去的。为了解决这个问题,JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。
三、异步编程的方式
1、回调函数
回调函数是JavaScript中最早和最基本的异步编程方式。它通过在函数参数中传递一个函数,让我们能够在异步操作完成后调用该函数。
1.1定时器setTimeout 函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>回调函数等待 3 秒后执行。</p>
<p id="demo"></p>
<script>
function print() {
document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);
</script>
</body>
</html>
setTimeout 就是一个消耗时间较长(3 秒)的过程,它的第一个参数是个回调函数,第二个参数是毫秒数,这个函数执行之后会产生一个子线程,子线程会等待 3 秒,然后执行回调函数 “print”,在命令行输出 “RUNOOB!”。
当然,JavaScript 语法十分友好,我们不必单独定义一个函数 print ,我们常常将上面的程序写成:
setTimeout(function () {
document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);
注意:既然 setTimeout 会在子线程中等待 3 秒,在 setTimeout 函数执行之后主线程并没有停止,所以:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>回调函数等待 3 秒后执行。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
setTimeout(function () {
document.getElementById("demo1").innerHTML="RUNOOB-1!"; // 三秒后子线程执行
}, 3000);
document.getElementById("demo2").innerHTML="RUNOOB-2!"; // 主线程先执行
</script>
</body>
</html>
输出:
回调函数等待 3 秒后执行。
RUNOOB-2!
三秒后变成:
回调函数等待 3 秒后执行。
RUNOOB-1!
RUNOOB-2!
1.2 事件监听 addEventListener()
网络事件AJAX
除了 setTimeout 函数以外,异步回调广泛应用于 AJAX 编程。
XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据。一个标准的 XMLHttpRequest 对象往往包含多个回调:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p><strong>以下内容是通过异步请求获取的:</strong></p>
<p id="demo"></p>
<script>
var xhr = new XMLHttpRequest();
xhr.onload = function () {
// 输出接收到的文字数据
document.getElementById("demo").innerHTML=xhr.responseText;
}
xhr.onerror = function () {
document.getElementById("demo").innerHTML="请求出错";
}
// 发送异步 GET 请求
xhr.open("GET", "/try/ajax/ajax_info.txt", true);
xhr.send();
</script>
</body>
</html>
XMLHttpRequest 的 onload 和 onerror 属性都是函数,分别在它请求成功和请求失败时被调用。如果你使用完整的 jQuery 库,也可以更加优雅的使用异步 AJAX:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>