JS异步的执行原理和回调详解
一、JS异步的执行原理
我们知道JavaScript是单线程的，而浏览器是多线程的。单线程执行任务需要一个个排队进行，假如一个任务需要很长时间执行（像ajax需要较长时间），会直接导致无响应，后面的任务一直在等待执行。这时候就需要用到异步。
想了解异步，首先我们要知道浏览器有最基本的三个常驻线程： JS引擎线程，事件触发线程，GUI渲染线程。
其中JS引擎线程和事件触发线程共同构成了一种事件循环机制，而GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新保存在一个队列中，当JS引擎空闲时，立即被执行。
我们从它的事件循环机制解析：
JS引擎线程中分为同步和异步任务：
1.同步任务全部通过主线程执行，形成执行栈。
2.当有异步任务时交给异步进程（WebAPIs）：包含事件触发线程或者定时器线程等处理，形成任务队列。
3.当执行栈中的任务全部处理完成，主线程为空闲的时候，会从任务队列中提取任务到执行栈中执行。
通俗来说，JavaScript除了主线程之外还存在一个任务队列，任务队列存放需要异步执行的内容，执行完主线程后，就会不断循环扫描执行任务队列的任务，直至队列清空。
画解：
如图小明因为学习耗时长会，如果没做完就会一直无法玩DNF游戏了，就把学习放到了异步任务队列中，等玩完游戏(主线程)再学习(任务队列)。期间母亲添加学习事件(DOM事件)，小明每完成一个学习任务就看看还有啥任务(循环扫描),直至最后做完.
下面再看一个例子（浏览器刷新不断点击按钮）：
let myData = null
//ajax请求
function ajax() {
//腾讯新冠实时数据接口，仅做学习
axios.get('https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare')
.then(data => {
console.log("ajax返回成功");
myData = data.data
console.log(myData);
})
.catch(error => {
console.log("ajax返回失败");
})
}
console.log(myData);
ajax()
setTimeout(() => {
console.log('定时器');
}, 2000);
console.log(myData);
const btn = document.querySelector('button')
btn.onclick = () => {
console.log("点击了");
}
null
null
ajax返回成功
Object
点击了
定时器
点击了
可以看到，console在主线程中是同步执行的，先执行，而在主线程外的任务队列，存放着异步执行的内容，这里是setTimeout，ajax和DOM事件，按照任务队列顺序执行（循环扫描队列）。
为什么要循环扫描呢？
通过点击事件可以看出，当用户进行交互时（点击事件，滚动事件，窗口大小变化事件等），会向事件循环中的任务队列添加新事件，然后等待执行，所以需要循环扫描。
二、JS异步中的回调
既然异步都是放在最后的任务队列执行，那么我们很多逻辑就难以实现，这时候我们需要处理这种异步逻辑，最常用的方式是回调——回头调用。
回调函数：简单来说就是，函数A中传入函数B作为参数时，函数B即为A函数执行的回调函数。回调有嵌套回调和链式回调两种。
下面是回调的一个简单用法：
let myData = null
console.log(myData);
setTimeout(() => {
console.log('定时器');
}, 2000);
const btn = document.querySelector('button')
btn.onclick = () => {
console.log("点击了");
}
let name = "张三"
function hr(callback) {
setTimeout(() => {
console.log(`我是${name}`);
callback();
}, 2001);
}
console.log(myData);
function gj() {
console.log(`${name}你好，我是李四，认识一下吧`);
}
hr(gj)
null
null
点击了
定时器
我是张三
张三你好，我是李四，认识一下吧
点击了
很明显的看到，当我们函数需要用到数据的时候就用到了回调，这里用到的是异步回调。
回调虽然是解决异步常用的方法，可是伴随着JS日益复杂的需求。同步异步需要越来越多的回调实现逻辑。同异步的混杂和过多的回调嵌套和缩进使得代码变得难以解读和维护，形成“回调地狱”。
我们看一个例子：
const verifyUser = function(username, password, callback){
dataBase.verifyUser(username, password, (error, userInfo) => {
if (error) {
callback(error)
}else{
dataBase.getRoles(username, (error, roles) => {
if (error){
callback(error)
}else {
dataBase.logAccess(username, (error) => {
if (error){
callback(error);
}else{
callback(null, userInfo, roles);
}
})
}
})
}
})
};
大多数人光是看到上面的代码就感受到了脑子冻结的滋味，如果一个项目里拥有上百个这样的代码块，过一段时间，我相信连编写他的人都会头疼。来到自己的项目就像是来到了地狱。
最主要的是，与此同时回调还存在信任问题，他把执行控制权交给了某个第三方（比如ajax）。为了解决信任问题，我们必须在程序写各种逻辑来解决回调带来的信任问题。
·调用过早
·调用过完
·调用次数过多过少，没有把需要的参数成功传给回调函数，
·可能出现的错误被吞。
可以发现写特定逻辑来解决特定的信任问题，已经使得难度大于本身应用价值了，还会造成代码冗杂，可读性差等问题。
综上：回调解决异步存在缺陷：
1）不符合人对任务处理的逻辑思维
2）回调带来的信任问题。
面对回调日益明显的弊端，ES6更新了Promise用来解决异步问题。下一篇写ES6——Promise。
总结
到此这篇关于JS异步的执行原理和回调的文章就介绍到这了,更多相关JS异步执行原理回调内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS异步执行结果获取的3种解决方式
前言 JS异步执行机制具有非常重要的地位,尤其体现在回调函数和事件等方面. 但异步有时候很方便,有时候却很让人恼火,下面来总结一下异步执行结果获取的方法 回调 这是最传统的方法了,也是最简单的,如下代码 function foo(cb) { setTimeout(function() { cb(1); // 通过参数把结果返回 }, 2000); } foo(function(result) { // 调用foo方法的时候,通过回调把方法返回的数据取出来 console.log(result);
-
分析JS单线程异步io回调的特性
我们最开始接触javascript应该大部分是从html中的js脚本开始,但是这种看似简单的语言稀里糊涂的用了好几年,也没有搞清楚它的一些原理机制,有没有躺枪! 起码javascript在操作dom的时候用了各种事件回调,比如按钮,链接的点击,鼠标经过,获取焦点等等. 在这个过程中,我们在dom上绑定一个事件回调函数 比如 onclick="doCheck()" 这个过程就是给dom元素注册了一个click 事件,并且绑定了一个事件回调函数 doCheck(). 当鼠标点击这个元素的时
-
JavaScript异步回调的Promise模式封装实例
网页的交互越来越复杂,JavaScript 的异步操作也随之越来越多.如常见的 ajax 请求,需要在请求完成时响应操作,请求通常是异步的,请求的过程中用户还能进行其他的操作,不会对页面进行阻塞,这种异步的交互效果对用户来说是挺有友好的.但是对于开发者来说,要大量处理这种操作,就很不友好了.异步请求完成的操作必须预先定义在回调函数中,等到请求完成就必须调用这个函数.这种非线性的异步编程方式会让开发者很不适应,同时也带来了诸多的不便,增加了代码的耦合度和复杂性,代码的组织上也会很不优雅,大大降低了
-
浅谈js的异步执行
1.Javascript语言的执行环境是"单线程"(single thread): 优点:实现起来比较简单,执行环境相对单纯: 缺点:只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行. 为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous). 2.&
-
js 异步操作回调函数如何控制执行顺序
需求: fun A() { asyn(parm1, parm2, onsuccess(){ }) ;} fun B() {asyn(paem1, parm2, onsuccess(){}) ;} 函数B要求执行在函数A之后 异步执行 如果直接使用 A(); B(); 是不能够满足执行条件的. 考虑将B作为回调函数传递给A,然后A再执行的onsucess中执行B函数 A(B); 即可实现功能需求. js是单线程的. 1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的
-
JS多个异步请求 按顺序执行next实现解析
在js里面,偶尔会遇见需要多个异步按照顺序执行请求,又不想多层嵌套,,这里和promise.all的区别在于,promise或者Jquery里面的$.when 是同时发送多个请求,一起返回,发出去的顺序是一起:这里是按照顺序发请求 首先创建一个迭代器,接收任意多个函数参数 function nextRegister(){ var args = arguments; var count = 0; var comm = {}; function nextTime(){ count++; if(cou
-
javascript带回调函数的异步脚本载入方法实例分析
本文实例讲述了javascript带回调函数的异步脚本载入方法.分享给大家供大家参考.具体实现方法如下: var Loader = function () { } Loader.prototype = { require: function (scripts, callback) { this.loadCount = 0; this.totalRequired = scripts.length; this.callback = callback; for (var i = 0; i < scri
-
JavaScript队列函数和异步执行详解
编辑注:在Review别人的JavaScript代码时曾看到过类似的队列函数,不太理解,原来这个是为了保证函数按顺序调用.读了这篇文章之后,发现还可以用在异步执行等. 假设你有几个函数fn1.fn2和fn3需要按顺序调用,最简单的方式当然是: fn1(); fn2(); fn3(); 但有时候这些函数是运行时一个个添加进来的,调用的时候并不知道都有些什么函数:这个时候可以预先定义一个数组,添加函数的时候把函数push 进去,需要的时候从数组中按顺序一个个取出来,依次调用: var stack =
-
JS异步的执行原理和回调详解
一.JS异步的执行原理 我们知道JavaScript是单线程的,而浏览器是多线程的.单线程执行任务需要一个个排队进行,假如一个任务需要很长时间执行(像ajax需要较长时间),会直接导致无响应,后面的任务一直在等待执行.这时候就需要用到异步. 想了解异步,首先我们要知道浏览器有最基本的三个常驻线程: JS引擎线程,事件触发线程,GUI渲染线程. 其中JS引擎线程和事件触发线程共同构成了一种事件循环机制,而GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新保
-
js 程序执行与顺序实现详解
函数的声明和调用 JavaScript是一种描述型脚本语言,由浏览器进行动态的解析与执行.函数的定义方式大体有以下两种,浏览器对于不同的方式有不同的解析顺序. 代码如下: 复制代码 代码如下: //"定义式"函数定义 function Fn1(){ alert("Hello World!"); } //"赋值式"函数定义 var Fn2 = function(){ alert("Hello wild!"); } 页面加载过程中
-
基数排序算法的原理与实现详解(Java/Go/Python/JS/C)
目录 说明 实现过程 示意图 性能分析 代码 Java Python Go JS TS C C++ 链接 说明 基数排序(RadixSort)是一种非比较型整数排序算法,其原理是将整数按位数切割成不同的数字,然后按每个位数分别比较.由于整数也可以表达字符串(比如名字或日期)和特定格式的浮点数,所以基数排序也不是只能使用于整数.基数排序的发明可以追溯到1887年赫尔曼·何乐礼在列表机(Tabulation Machine)上的 基数排序的方式可以采用LSD(Least significant di
-
JS JSOP跨域请求实例详解
在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu
-
Vue.js实现watch属性的示例详解
目录 1.写在前面 2.watch的实现原理 3.立即执行的watch与回调执行时机 立即执行的回调函数 回调函数的执行时机 4.过期的副作用函数和cleanup 5.写在最后 1.写在前面 在上篇文章中,我们讨论了compted的实现原理,就是利用effect和options参数进行封装.同样的,watch也是基于此进行封装的,当然watch还可以传递第三参数去清理过期的副作用函数.不仅可以利用副作用函数的调度性,去实现回调函数的立即执行,也可以控制回调函数的执行时机. 2.watch的实现原
-
Apache Cordova Android原理应用实例详解
目录 前言 技术选型 技术原理 1. 如何本地加载url对应的资源 2. webview如何使用js调用app原生api 3. app原生api如何回调webview中的js 4. 多个plugin的情况 关于踩到的坑 1. 打包路径配置问题 2. success不回调问题 前言 从原理到应用复盘一下自己做过的所有项目,希望能让我自己过两年仍然能看懂现在写的代码哈哈.在项目里我只负责了Android的开发包括插件开发和集成,ios没摸到,有机会也得自己玩下,但是这篇文章不会接触. 技术选型 现在
-
JavaScript懒加载与预加载原理与实现详解
目录 1.懒加载 1.1.什么是懒加载 1.2.为什么要使用懒加载 1.3.懒加载的优点 1.4.懒加载的原理 1.5.懒加载的实现步骤 1.6.懒加载的实现方式 2.预加载 2.1.什么是预加载 2.2.为什么要使用预加载 2.3.实现预加载的方法 1.懒加载 1.1.什么是懒加载 懒加载也可以叫做延迟加载,当访问一个页面的时候,先把img元素伙食其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样只需要请求一次,俗称占位图): 只有当图片出现在浏览器的可视区域内时,才这只图片真正
-
Java web拦截器inteceptor原理及应用详解
这篇文章主要介绍了java web拦截器inteceptor原理及应用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.简介 java里的拦截器提供的是非系统级别的拦截,也就是说,就覆盖面来说,拦截器不如过滤器强大,但是更有针对性. Java中的拦截器是基于Java反射机制实现的,更准确的划分,应该是基于JDK实现的动态代理.它依赖于具体的接口,在运行期间动态生成字节码. 拦截器是动态拦截Action调用的对象,它提供了一种机制可以使开发
-
JS中自定义事件与观察者模式详解
目录 一.前言 二.观察者模式优缺点 三.代码实现 四.DOM自定义事件API 一.前言 观察者模式 也称发布-订阅模式 . 模型-视图模式 .当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知依赖它的对象.观察者模式属于行为型模式. 观察者模式: 类似我们在微信平台订阅了公众号 , 当它有新的文章发表后,就会推送给我们所有订阅的人. 我们作为订阅者不必每次都去查看这个公众号有没有新文章发布,公众号作为发布者会在合适时间通知我们
-
epoll封装reactor原理剖析示例详解
目录 reactor是什么? reactor模型三个重要组件与流程分析 组件 流程 将epoll封装成reactor事件驱动 封装每一个连接sockfd变成ntyevent 封装epfd和ntyevent变成ntyreactor 封装读.写.接收连接等事件对应的操作变成callback 给每个客户端的ntyevent设置属性 将ntyevent加入到epoll中由内核监听 将ntyevent从epoll中去除 读事件回调函数 写事件回调函数 接受新连接事件回调函数 reactor运行 react