JS高级-异步
单线程
只有一个线程,同一时间只能做一件事
原因:避免DOM渲染的冲突
浏览器需要渲染DOM
JS可以修改DOM结果
JS执行的时候,浏览器DOM渲染会暂停
两段JS也不能同时执行(修改DOM就冲突)
webworker支持多线程,但是不能访问DOM,本质JS还是单线程
解决方案:异步
case1
{
var i, sum = 0
for(i = 0; i < 100000000; i++) {
sum += i
}
console.log(sum)
}
case2
{
console.log(1)
alert('a')
console.log(2)
}
分析:JS执行阻塞DOM渲染,出现卡顿。因为js是单线程
case3
{
console.log(100)
setTimeout(function(){
console.log(200)
},100)
console.log(300)
}
分析:JS是单线程的,第一行打印100,第二行setTimeout是异步,暂时不执行,先往下执行,第三行打印300,代码结束。然后发现setTimout没执行,那么打印200。
event-loop
事件轮询,JS实现异步的具体解决方案
同步代码,直接执行
异步函数先放在异步队列中
待同步函数执行完毕,轮询执行异步队列的函数
case1
{
console.log(100)
setTimeout(function(){
console.log(200)
},100)
console.log(300)
}
分析:同步代码,直接执行,第一行和第三行是同步代码,直接打印100和300,第二行是异步代码,先放入异步队列。同步代码执行完毕,这时候查看异步队列,执行setTimeout打印200
case2
{
console.log(100)
setTimeout(function(){
console.log(200)
},100)
setTimeout(function(){
console.log(300)
})
console.log(400)
}
分析:同步代码直接执行,第一行和第四行直接执行,打印100和400。
同步代码执行完毕,查看异步队列。这时候有2个setTimeout函数,第三行会直接放入异步队列中,那么打印300。
而第二行100ms之后才被放入异步队列中,打印200
case3
{
$.ajax({
url:'',
success:function(result){
console.log('a')
}
})
setTimeout(function(){
console.log('b')
},100)
setTimeout(function(){
console.log('c')
})
console.log('d')
}
结果: d c a b或者 d c b a
jQuery的Deferred
dtd.resolve/dtd.reject
dtd.then/dtd.done/dtd/fail
case1
function waitHandle() {
var dtd = $.Deferred()
!function(dtd){
var task = function() {
console.log('执行完毕')
dtd.resolve()
}
setTimeout(task, 2000)
}(dtd)
return dtd
} waitHandle()
.then(function(){
console.log('success')
})
case2
function waitHandle() {
var dtd = $.Deferred()
!function(dtd){
var task = function() {
console.log('执行完毕')
dtd.resolve()
}
setTimeout(task, 2000)
}(dtd)
return dtd.promise()
} var w = waitHandle()
$.when(w).then(function(){
console.log('success')
})
注意:这2个case不同之处一个case是返回dtd还有一个返回dtd.promise()对象。
第一个case w.reject()不会报错,但是会出现代码混乱
第二个case w.reject()会报错,无法干预代码
Promise
回顾下语法
case
{
function loadImg(src){
return new Promise((resolve, reject)=>{
let img = document.createElement('img') img.onload = () => resolve(img) img.onerror = () => reject() img.src = src
})
} const src = 'https://....jpeg' var res = loadImg(src)
res.then(img => {
console.log(img)
}, () => {
console.log('fail')
})
}
异常捕获
使用catch统一捕获异常
case
{
function loadImg(src){
return new Promise((resolve, reject)=>{
let img = document.createElement('img')
img.onload = () => resolve(img) img.onerror = () => reject('异常') img.src = src
})
} const src = 'https://....jpeg' var res = loadImg(src)
res.then(img => {
console.log(img)
}).catch(e => {
console.log(e)
})
}
多个串联
链式操作部分代码
const res = loadImg(src)
const res2 = loadImg(src2)
res.then(() => {
console.log('one')
return res2
}).then(() => {
console.log('two')
}).catch(e => {
console.log(e)
})
Promise.all和Promise.race
Promise.all接收一个promise对象的数组,待全部完成之后,统一执行then
Promise.race接收一个promise对象的数组,只要一个完成,就执行then
async/await
直接只用同步写法
case
{
function loadImg(src){
return new Promise((resolve, reject)=>{
let img = document.createElement('img')
img.onload = () => resolve(img) img.onerror = () => reject('异常') img.src = src
})
} const src = 'https://....jpeg'
const src2 = 'https://...jpg' async function load() {
const res = await loadImg(src)
console.log(res)
const res2 = await loadImg(src2)
console.log(res2)
}
load()
}
虽然是同步写法,但是使用了Promise,并没有改变JS时单线程,异步的本质
JS高级-异步的更多相关文章
- 惰性函数——JS高级
我们先来看一下js的异步提交. XHR我们在原生的时候常常用到,因为常用到,我们更多把封装到了工具库中 先看下他最常用的实现 // 旧方法 function createXHR() { var xhr ...
- js的异步和单线程
最近,同事之间做技术分享的时候提到了一个问题"js的异步是另开一个线程吗?"当时为此争论不休.会后自己查阅了一些资料,对这个问题进行一个自我的分析与总结,有不同意见的希望可以赐教, ...
- 《Node.js 高级编程》简介与第二章笔记
<Node.js 高级编程> 作者简介 Pedro Teixerra 高产,开源项目程序员 Node 社区活跃成员,Node公司的创始人之一. 10岁开始编程,Visual Basic.C ...
- Ext.js高级组件
第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...
- JS高级(摘自简书)
JS高级 1. 访问对象属性(方法也是属性)的通用方式:obj['属性名'] 1. 属性名包含特殊字符,如"-".空格,访问:obj['content-type'] 2. 属性名不 ...
- JS高级前端开发群加群说明及如何晋级
JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...
- 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯
http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...
- Node.js高级编程读书笔记Outline
Motivation 世俗一把,看看前端的JavaScript究竟能做什么. 顺便检验一下自己的学习能力. Audience 想看偏后台的Java程序员关于前端JavaScript的认识的职业前端工程 ...
- 读JS高级——第五章-引用类型 _记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- libdl.so 动态库加载、查找
使用libdl.so库 动态库加载原理 动态库中函数的查找已经封装成 libdl.so,有4个函数: dlopen : 打开一个动态库 dlsym : 在打开的动态库里找一个函数 dlclo ...
- Learn how to use git
Git配置 $ git config --global user.name "Your Name" $ git config --global user.email "e ...
- Win强制删除文件windows批处理强行删除文件
一般情况下选中文件或文件夹可以直接删除文件,但是有些情况下例如:文件非常规命名.找不到文件位置等就无法直接删除. 针对这种情况可以用 bat批处理文件 删除,一下就是该方法的步骤 新建一个文件:*** ...
- scikit-learn实现简单的决策树
#encoding=utf-8import numpy as npimport pandas as pd def main(): #Pre-processing from sklearn.datase ...
- spring(二、bean生命周期、用到的设计模式、常用注解)
spring(二.bean生命周期.用到的设计模式.常用注解) Spring作为当前Java最流行.最强大的轻量级框架,受到了程序员的热烈欢迎.准确的了解Spring Bean的生命周期是非常必要的. ...
- java内部类及四种内部类的实现方式
java内部类及四种内部类的实现方式 一.内部类定义:内部类分为: 成员内部类.静态嵌套类.方法内部类.匿名内部类. 二.为何要内部类?a.内部类提供了某种进入外围类的窗户.b.也是最吸引人的原因, ...
- CDI的分析
CDI是一组服务,它们一起使用,使开发人员可以轻松地在Web应用程序中使用企业bean和JavaServer Faces技术.CDI设计用于有状态对象,还有许多更广泛的用途,允许开发人员以松散耦合但类 ...
- 学习笔记TF023:下载、缓存、属性字典、惰性属性、覆盖数据流图、资源
确保目录结构存在.每次创建文件,确保父目录已经存在.确保指定路径全部或部分目录已经存在.创建沿指定路径上不存在目录. 下载函数,如果文件名未指定,从URL解析.下载文件,返回本地文件系统文件名.如果文 ...
- win 10 kms 激活 后 火狐 上 https 网站 报错
原因: 系统导入了未知的根证书 影响:?? 解决方法: http://mozilla.com.cn/thread-374897-1-1.html
- 无状态http协议上用户的身份认证
1.注册时可以使用手机短信验证码进行身份认证 2.用户每次请求不能每次都发送验证码,这时需要服务器给客户端颁发一个身份凭证(一般为一个唯一的随机数),用户每次请求时都携带身份凭证, 服务器会记录该身份 ...