JavaScript异步编程详解

s甜甜的学习之旅

已于 2023-10-08 11:21:50 修改

阅读量232

点赞数

分类专栏： JavaSE 文章标签： javascript java 前端 ecmascript 开发语言

于 2023-10-08 09:16:41 首次发布

本文链接：https://blog.csdn.net/m0_46615310/article/details/133668966

版权

JavaSE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript异步编程详解

一、异步与同步的概念
- 1、同步编程
- 2、异步编程
二、什么时候使用异步编程
三、异步编程的方式
参考

一、异步与同步的概念

1、同步编程

计算机一行一行按照顺序依次执行代码，如果当前的代码任务耗时执行了，那么会阻塞后续代码的执行。

只能123，不能132

同步编程是一种典型的请求-响应模型，当请求调用一个函数或者方法，需要等待其响应返回才能执行后续的代码

应用：传统的单线程编程

2、异步编程

多任务并发执行+返回结果

利用线程的概念来理解：
每一个线程做一件事，不同的线程中可以执行不同的任务

或者使用主子线程来理解（菜鸟教程）：
从主线程（线程1、线程2）发射子线程（任务1、任务2、任务3）来完成任务，不同的主线程发射不同的子线程来执行任务。

使用线程与线程池来理解：
多线程处理，处理过程中将任务添加到线程队列中

线程1与线程2可以视作主线程，任务1、任务2可以视作主线程1发射的子线程1和2

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>