JS 异步队列
来源:互联网 发布:新都广电网络 编辑:程序博客网 时间:2024/06/07 16:06
hello 好久没学博客了 最近实习忙项目 以及规划行程(哈哈哈我就是爱旅游的孩子)
我们常说JS是单线程的,那到底什么是单线程?什么是同步?什么是异步?如何解决回调地狱??
同步:你在做一件事情,不能同时去做另外一件事。
异步:你在做一件事情,这件事可能会耗时很久,而此时你可以在等待的过程中,去做另外一件事。
比如煮开水这件事吧..在这过程,你担心水沸了而不去做其它事情,就等到水沸腾,那就是同步。
而你觉得这过程耗时蛮久,可以先去做其它事情,比如去扫地,直到水沸腾。
单线程:即任务只能是一个个执行的,不能多个任务同时执行,即没有并发性。
你或许会跟我一样疑惑,大家都说JS是单线程的,可是为什么它还有异步代码这么一说。
JS确实是单线程的。但是它运行的环境浏览器内核是多线程的。包括了JS引擎线程、事件触发线程、http请求线程、GUI渲染线程。而各个线程之间是互斥的。比如JS在执行的时候,GUI渲染线程是处于挂起状态。
总不能我在改变DOM节点的时候,你一边进行渲染吧,那会导致性能损耗很大,所以它还是机智的~
之前写过关于异步的文章,主要讲解了单线程的概念和定时器。
来,跟随我来看这段代码
//code 1console.log('a')//code 2setTimeout(()=>{ console.log('b')},1000)//code 3for(let i=0; i<10000; i++){ // console.time}//code 4console.log('c')
其中code2是异步代码,其余的都是同步代码。
平时所说的定时器setTimeout、setInterval和事件触发onclick、onfocus等和http请求都是异步。
JS引擎线程会先执行同步代码,之后才执行处于任务队列里面的异步代码。
当触发定时器时,到达指定的时间后,该定时器的回调函数才会放入任务队列中。
当触发事件时,指定的回调函数也会放入任务队列中。
JS引擎执行完同步代码,才会从任务队列中获取回调函数(异步代码)执行。
这里我假设for循环执行时间有两种情况。
情况一: 同步代码总耗时少于1s
情况二:同步代码总耗时大于1s
这里需要了解到“触发”和“执行”并不是一回事。
当代码刚执行到code 2,触发定时器,触发即表示1s后将回调函数加入任务队列中,但是这并不代表到达指定的时间就立即执行内部的代码(也就是上面所说的,全部同步代码执行结束,才开始执行异步代码)。
让我们来巩固下
分析情况一:
如果同步代码总耗时少于1s,比如500ms,这时候还要继续等待大约500ms,才开始执行定时器的回调函数。
分析情况二:
如果同步代码总耗时大于1s,比如1500ms,所以早在1000ms时,定时器就已经完成了倒计时,此时就将回调函数放入任务队列中,只是js引擎线程还在执行同步代码。等到1500ms时,同步代码执行完毕,JS引擎就去查找任务队列是否有异步代码,有则执行。
最近遇到了一个请求获取到的数据,另一个请求依赖该数据的情况。
可能在很久很久之前我会这么写
$.ajax({ url: 'getUsername.php', data: { id }, dataType: 'GET', success: function(username){ if(username){ $.ajax({ url: 'getUserInfo.php', data: { username }, dataTyle: 'GET', success(userInfo){ // ... } }); } }});
这就是常说的回调地狱,2个嵌套还好,要是有更多个…
现在我是用promise解决的,写着写着就觉得代码看起来不清晰,不能更直观的当成同步代码来看…
function getUsername(id){ return new Promise((resolve, reject)=>{ // 请求username的操作,模拟 api.getUsername(id).then((username, err)=>{ if(username){ resolve(username); } reject(err); }) });}function getUserInfo(username){ return new Promise((resolve, reject)=>{ // 请求userInfo的操作,模拟 api.getUserInfo(username).then((userInfo, err)=>{ if(userInfo){ resolve(userInfo); } reject(err); }) });}getUsername(id).then((username)=>{ return getUserInfo(username);}).then((userInfo) => { console.log(userInfo);}).catch((err)=>{ console.log(err);});
于是乎,度娘解决我的痛点,async/await~
function getUsername(id){ return new Promise((resolve, reject)=>{ // 请求username的操作,模拟 api.getUsername(id).then((username, err)=>{ if(username){ resolve(username); } reject(err); }) });}function getUserInfo(username){ return new Promise((resolve, reject)=>{ // 请求userInfo的操作,模拟 api.getUserInfo(username).then((userInfo, err)=>{ if(userInfo){ resolve(userInfo); } reject(err); }) });}let asyncFn = async function(id){ let username = await getUsername(id); let userInfo = await getUserInfo(username); console.log(userInfo);}
async甚至还可以帮助我们实现js中没有sleep函数的痛点..
let fn = function(time){ return new Promise((resolve, reject) => { setTimeout(resolve, time); });}let testAsync = async function(){ alert('a') await fn(2000) alert('b')}testAsync()
- js异步队列函数
- JS 异步队列
- JS 异步队列的实现
- JS异步原理(事件,队列)
- JS异步原理(事件,队列)
- JS单线程、任务队列与异步
- js异步
- js异步
- JS异步
- Python异步任务队列
- ASINetworkQueue异步下载队列
- celery 异步任务队列
- ASIHTTPRequest实现异步队列
- 异步函数,并发队列
- 七牛-异步队列
- 异步实现消息队列
- GCD-异步全局队列
- 异步消息队列
- 【洛谷2215】【HNOI2007】上升序列
- swiper的使用和轮播图
- 【Java系列】【基础版】多线程基础
- 周中训练笔记(三)
- Java之堆栈、方法区
- JS 异步队列
- Sqoop2 MySQL与HDFS导入导出
- Mybatis源码分析(一)--Mapper的动态代理
- 网络通信协议
- 生命游戏小游戏开发报告
- 线性回归与梯度下降算法
- 神经网络PID控制
- java对象和字符串互转以及json字符串转List<Object>集合
- 恶意代码分析