详解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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 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
PHP实时显示输出
2008/10/02 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
Vue仿今日头条实例详解
2018/02/06 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
浅谈Python实现Apriori算法介绍
2017/12/20 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
饮料业务员岗位职责
2013/12/15 职场文书
护士岗位职责
2014/02/16 职场文书
国庆节活动总结
2014/08/26 职场文书
高中军训的心得体会
2014/09/01 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
中学社团活动总结
2015/05/07 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
Python预测分词的实现
2021/06/18 Python
Python如何加载模型并查看网络
2022/07/15 Python