详解JavaScript异步编程与回调机制

异步编程基础概念

异步的概念

异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。

在传统单线程编程模型中，程序执行是同步的，即步骤在一个控制流序列中按顺序执行，但这并不意味着所有步骤同时运行。而异步则不保证这种同步性，意味着一个异步过程的执行不再受原有执行序列的顺序约束。

通俗理解，同步代码严格按照编写顺序执行，而异步代码不遵循此顺序，其执行效率通常更高。

异步机制的本质是从主线程发射一个子线程来完成任务。

异步编程的应用场景

什么时候用异步编程

在前端开发中（后端偶尔也涉及），处理简短且快速的操作（如计算 1 + 1）通常直接在主线程完成。由于主线程同一时间只能处理一个请求，若某个事件未结束，界面将无法响应其他操作。

例如，若将按钮的 onclick 事件设置为死循环，按下按钮后整个网页将失去响应。

为避免此类情况，常使用子线程处理耗时较长、用户可感知的操作，如读取大文件或发起网络请求。子线程独立于主线程，即使阻塞也不会影响主线程运行。但子线程存在局限：一旦发射便与主线程失去同步，无法确定其结束时间；若结束后需处理结果（如服务器信息），难以直接合并回主线程。

为解决此问题，JavaScript 中的异步操作函数通常通过回调函数来处理异步任务的结果。

回调函数与实例解析

回调函数

回调函数是一个在启动异步任务时指定的函数，用于告知任务完成后执行的操作。这样主线程无需关注异步任务状态，任务可自动完成后续处理。

实例

function print() {
 document.getElementById("demo").innerHTML="JB51!";
}
setTimeout(print, 3000);

效果图

代码中的 setTimeout 是一个耗时过程（3 秒），其第一个参数为回调函数，第二个参数为毫秒数。函数执行后生成子线程，子线程等待 3 秒后执行回调函数 "print"，在命令行输出 "Time out"。

JavaScript 语法友好，无需单独定义 print 函数，常将上述程序简写为：

setTimeout(function () {
 document.getElementById("demo").innerHTML="JB51!";
}, 3000);

注意：由于 setTimeout 在子线程中等待 3 秒，且 setTimeout 执行后主线程并未停止，因此：

setTimeout(function () {
 console.log("1");
}, 1000);
console.log("2");

这段程序的执行结果是：

2 1

AJAX异步请求处理

异步 AJAX

除 setTimeout 外，异步回调广泛应用于 AJAX 编程。有关 AJAX 的详细信息，请参阅：https://www.jb51.net/article/80686.htm

XMLHttpRequest 常用于请求远程服务器上的 XML 或 JSON 数据。一个标准的 XMLHttpRequest 对象通常包含多个回调：

var xhr = new XMLHttpRequest();
 
xhr.onload = function () {
 // 输出接收到的文字数据
 document.getElementById("demo").innerHTML=xhr.responseText;
}
 
xhr.onerror = function () {
 document.getElementById("demo").innerHTML="请求出错";
}
 
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();

XMLHttpRequest 的 onload 和 onerror 属性均为函数，分别在请求成功和失败时被调用。若使用完整的 jQuery 库，可更优雅地使用异步 AJAX：

$.get("https://www.runoob.com/try/ajax/demo_test.php",function(data,status){
 alert("数据: " + data + "\n状态: " + status);
});

以上就是详解JavaScript 异步编程的详细内容，更多关于JavaScript 异步编程的资料请关注本站其它相关文章！