详解JavaScript 异步编程


Posted in Javascript onJuly 13, 2020

异步的概念

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

在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。

简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效果更高:

以上是关于异步的概念的解释,接下来我们通俗地解释一下异步:异步就是从主线程发射一个子线程来完成任务。

详解JavaScript 异步编程

什么时候用异步编程

在前端编程中(甚至后端有时也是这样),我们在处理一些简短、快速的操作时,例如计算 1 + 1 的结果,往往在主线程中就可以完成。主线程作为一个线程,不能够同时接受多方面的请求。所以,当一个事件没有结束时,界面将无法处理其他请求。

现在有一个按钮,如果我们设置它的 onclick 事件为一个死循环,那么当这个按钮按下,整个网页将失去响应。

为了避免这种情况的发生,我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情,比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程,所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限:一旦发射了以后就会与主线程失去同步,我们无法确定它的结束,如果结束之后需要处理一些事情,比如处理来自服务器的信息,我们是无法将它合并到主线程中去的。

为了解决这个问题,JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

回调函数

回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它:等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了,他自己会善始善终。

实例

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

效果图

详解JavaScript 异步编程

这段程序中的 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

除了 setTimeout 函数以外,异步回调广泛应用于 AJAX 编程。有关于 AJAX 详细请参见:https://3water.com/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 异步编程的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
js实现两点之间画线的方法
May 12 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
javascript canvas时钟模拟器
Jul 13 #Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 #Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 #Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 #Javascript
Js on及addEventListener原理用法区别解析
Jul 11 #Javascript
JS call()及apply()方法使用实例汇总
Jul 11 #Javascript
JS如何定义用字符串拼接的变量
Jul 11 #Javascript
You might like
php5.2时间相差8小时
2007/01/15 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
JavaScript中的事件处理
2008/01/16 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
Python实现命令行通讯录实例教程
2016/08/18 Python
Python包和模块的分发详细介绍
2020/06/19 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
Python 操作 MySQL数据库
2020/09/18 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
买房子个人收入证明
2014/01/16 职场文书
数学系个人求职信范文
2014/01/30 职场文书
县级文明单位申报材料
2014/05/23 职场文书
领导班子对照检查材料
2014/09/22 职场文书
2016公司年会主持词
2015/07/01 职场文书
2015中秋祝酒词
2015/08/12 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python