详解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 相关文章推荐
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 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
第一节--面向对象编程
2006/11/16 PHP
轻松实现php文件上传功能
2017/02/17 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
python魔法方法-自定义序列详解
2016/07/21 Python
Python测试人员需要掌握的知识
2018/02/08 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
Python多线程获取返回值代码实例
2020/02/17 Python
python构造IP报文实例
2020/05/05 Python
Python sorted对list和dict排序
2020/06/09 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
印度低票价航空公司:GoAir
2017/10/11 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
关于工资低的辞职信
2014/01/14 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
个人银行贷款担保书
2014/04/01 职场文书
交通事故私了协议书
2014/04/16 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
培训科主任岗位职责
2014/08/08 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书