Javascript的异步与单线程
一、前言
我们都知道,javasript是一个单线程的语言;所谓单线程就是同一时间不能做两件事情,两段代码不能同时执行;因为这种机制,才避免了两段js同时对一个DOM节点进行渲染的冲突。但是也会因此产生一个问题,比如说有一个非常耗时的操作在js中执行,因为js是按顺序执行的,所以会导致代码一直卡在这个耗时的方法那里,从而造成页面假死的状态,为了解决这个问题,js也提供了一些解决方案,比 如Ajax、setTimeout、setInterval,提供了异步的解决方案。有人会说,那单线程和异步同时存在一个语言里不是冲突了吗?其实不然,js虽是单线程语言,但是浏览器不是单线程的啊,浏览器为js的执行分配了一个主线程,也可以通过某种方式另外开辟一个副线程去执行js中的耗时操作,然后通过callback的形式返回到主线程中去执行,所以说异步只是一种单线程的解决方案,并不能改变js语言作为一个单线程语言的本质。
二、异步
1、实现异步的方式(eventloop)事件轮询
eventloop即事件轮询,是js实现异步的具体方式,当js按顺序执行的时候遇到异步函数,会将异步函数放在异步队列中,当同步函数执行完毕之后会轮询执行异步队列中的函数。
事件轮询会一直查询异步队列中是否存在异步函数,所以在第一个地步函数执行完成之后,等待了一秒之后会在异步队列中发现func2这个函数出现在异步队列中,于是事件轮询查询到这个函数,并将此函数放入主进程中执行。其中func1和func2均属于异步函数的回掉函数。
2、异步的几个解决方案
(1)jquery中的deffered
function test() {
var dt = $.Deferred()
var wait = function(dt) {
var task = function() {
console.log('deffered is ok!')
dt.resolve() //成功
// dt.reject() //失败
}
setTimeout(task, )
return dt.promise()
}
return wait(dt)
} var w = test()
// w.reject() // 在这里执行reject()会导致接下来的函数走到error里,所以需要将上述返回对象改为返回promise
$.when(w).then(function() {
console.log('ok1')
}, function() {
console.log('error1')
})
w.then(function() {
console.log('ok2')
}, function() {
console.log('error2')
})
Deffered对象中可以主动修改resove或reject,promise只能被动监听
(2)Promise
Promise在ES6中真是被列为标准,关于Promise这里只说几个使用场景,
串联:即第二个异步的执行可能会依赖第一个异步执行的结果
function loadImg(src) {
var promise = new Promise((resolve, reject) => {
var img = document.createElement('img')
// throw new Error('this is a error!') //抛出一个异常
img.onload =function () {
resolve(img)
}
img.onerror = function () {
reject('picture onload error!') //传入一个信息会走到catch中捕捉到错误
}
img.src = src
})
return promise
};
//promise串联加载
var src = '**********************'
var result = loadImg(src)
var src1 = '**********************'
var result1 = loadImg(src1) result.then(() => {
console.log('first')
return result1 // 此处返回result1Promise实例,若不返回则默认返回result
}).then(() => {
console.log('second')
}).catch((error) => {
console.log(error)
})
Promise.all传入一个数组,即当所有的一部函数全部执行完毕之后才会走的回调函数
Promise.all([result, result1]).then(function(res) {
// 全部执行完毕之后的逻辑
})
Promise.race同样传入一个数组,即只要有一个异步函数执行完毕之后都会走回调函数
Promise.race([result, result1]).then(function(res) {
// 全部执行完毕之后的逻辑
})
(3)async/await
此方法不在ES6标准中,ES7引入,还没有成为标准,相比于Promise它只是在执行回调的方式不同,其后面还是跟的一个Promise,只不过Promise后面的.then依旧使用的是异步的回调方式,而async则是使用同步的使用方式
const load = async function() {
const result = await loadImg(src)
console.log(result.width)
const result1 = await loadImg(src1)
console.log(result1.width)
}
以上为本次讨论内容,不足之处还请指正
Javascript的异步与单线程的更多相关文章
- JavaScript 的异步和单线程
问题 Q:下面的代码是否能满足sleep效果? var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert( ...
- JavaScript异步和单线程
一,同步和异步的区别: 同步会阻塞代码执行,而异步不会.(比如alert是同步,setTimeout是异步) 二,前端使用异步的场景: 1,定时任务:setTimeout,setInterval 2, ...
- 【前端知识体系-JS相关】深入理解JavaScript异步和单线程
1. 为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Jav ...
- JavaScript 异步和单线程
JavaScript语言本身是单线程的,所以它自身不可能是异步.所谓单线程,就必然意味着:所有任务需要排队,前一个任务结束,才会执行后一个任务. 但js的宿主环境(比如浏览器,Node)是多线程的.宿 ...
- 0182 JavaScript执行机制:单线程,同步任务和异步任务,执行栈,消息队列,事件循环
以下代码执行的结果是什么? [结果是1 2 3 ] console.log(1); setTimeout(function () { console.log(3); }, 1000); console ...
- JavaScript的异步机制
我们经常说JS是单线程的,比如node.js研讨会上大家都说JS的特色之一是单线程的,这样使JS更简单明了,可是大家真的理解所谓JS的单线程机制吗?单线程时,基于事件的异步机制又该当如何 1 先看下两 ...
- JavaScript 扯几句单线程相关
JavaScript 扯几句单线程相关 众所周知,Javascript是单线程执行的,这也就是说:JavaScript在同一个时间上只能处理一件事.他不像C,Java等这些多 线程的,可以开不同的线程 ...
- Javascript的异步和回调
介绍JavaScript的一些同步.异步.单线程多线程,回调基本概念:https://segmentfault.com/a/1190000002999668
- javascript的异步编程
同步与异步 介绍异步之前,回顾一下,所谓同步编程,就是计算机一行一行按顺序依次执行代码,当前代码任务耗时执行会阻塞后续代码的执行. 同步编程,即是一种典型的请求-响应模型,当请求调用一个函数或方法后, ...
随机推荐
- cJSON笔记
github地址: https://github.com/DaveGamble/cJSON 需要将cJSON.h 和 cJSON.c拷贝到路径下,并且连接所需库文件 -lm 步骤:1.先将普通的jso ...
- Spring cloud微服务安全实战-6-8sentinel限流实战
阿里2018年开源的. 简单来说就是干三件事,最终的结果就是保证你的服务可用,不会崩掉.保证服务高可用. 流控 先从最简单的场景来入手. 1.引用一个依赖, 2,声明一个资源. 3.声明一个规则 注意 ...
- 使用ffmpeg.exe进行转码参数说明
使用ffmpeg.exe进行转码参数说明 摘自:https://blog.csdn.net/coloriy/article/details/47337641 2015年08月07日 13:04:32 ...
- 利用postman生成各种编程语言的代码
原文来源:https://learning.getpostman.com/docs/postman/sending_api_requests/generate_code_snippets/ 在Post ...
- [整理]Python程序员面试前需要看的博客(持续整理)
基本素养 如何聪明的提问 面试方法 从面试官角度来告诉大家,哪些人能面试成功 如何在面试中介绍自己的项目经验 计算机系统 [面试] 迄今为止把同步/异步/阻塞/非阻塞/BIO/NIO/AIO讲的这么清 ...
- ORA-02287: sequence number not allowed here问题的解决
当插入值需要从另外一张表中检索得到的时候,如下语法的sql语句已经不能完成该功能:insert into my_table(id, name) values ((select seq_my_table ...
- pytorch 中Dataloader中的collate_fn参数
一般的,默认的collate_fn函数是要求一个batch中的图片都具有相同size(因为要做stack操作),当一个batch中的图片大小都不同时,可以使用自定义的collate_fn函数,则一个b ...
- Python - Django - ORM QuerySet 方法补充
models.py: from django.db import models class Employee2(models.Model): name = models.CharField(max_l ...
- Python机器学习基础教程-第2章-监督学习之线性模型
前言 本系列教程基本就是摘抄<Python机器学习基础教程>中的例子内容. 为了便于跟踪和学习,本系列教程在Github上提供了jupyter notebook 版本: Github仓库: ...
- 在Django中template遇到 "context must be a dict rather
原代码: # 使用模板文件 # 1.加载模板文件,获取一个模板文件 temp = loader.get_template('booktest/index.html') # 2.定义模板上下文:给模板文 ...