单线程

  只有一个线程,同一时间只能做一件事

  原因:避免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高级-异步的更多相关文章

  1. 惰性函数——JS高级

    我们先来看一下js的异步提交. XHR我们在原生的时候常常用到,因为常用到,我们更多把封装到了工具库中 先看下他最常用的实现 // 旧方法 function createXHR() { var xhr ...

  2. js的异步和单线程

    最近,同事之间做技术分享的时候提到了一个问题"js的异步是另开一个线程吗?"当时为此争论不休.会后自己查阅了一些资料,对这个问题进行一个自我的分析与总结,有不同意见的希望可以赐教, ...

  3. 《Node.js 高级编程》简介与第二章笔记

    <Node.js 高级编程> 作者简介 Pedro Teixerra 高产,开源项目程序员 Node 社区活跃成员,Node公司的创始人之一. 10岁开始编程,Visual Basic.C ...

  4. Ext.js高级组件

    第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...

  5. JS高级(摘自简书)

    JS高级 1. 访问对象属性(方法也是属性)的通用方式:obj['属性名'] 1. 属性名包含特殊字符,如"-".空格,访问:obj['content-type'] 2. 属性名不 ...

  6. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...

  7. 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯

    http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...

  8. Node.js高级编程读书笔记Outline

    Motivation 世俗一把,看看前端的JavaScript究竟能做什么. 顺便检验一下自己的学习能力. Audience 想看偏后台的Java程序员关于前端JavaScript的认识的职业前端工程 ...

  9. 读JS高级——第五章-引用类型 _记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.1 A map with single layer

    MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.1 A map with single layer 一.前言 开始MapServer用 ...

  2. okhttp请求文件异常解决方法

    微信借口中获取素材的接口返回只是一个缓存的文件流 InputStream, 接口中请求永久图片素材返回的是 InputStream; 接口项目获取到 InputStream 可以直接通过文件流写到文件 ...

  3. python笔记16-函数

    函数说白了,就是把一组代码合到一起,可以实现某种功能,需要再用到这个功能的话,直接调用这个函数就行了 1.定义函数def def my_open():#函数名,def定义函数,my_open给这个函数 ...

  4. python基础之centos6.5 升级 python2.7, 安装pip, MySQLdb

    这个仅仅是为了运行脚本需求, 将centos6.5中的 python 2.6.6升级到了 2.7 并且安装和了 pip 和 MySQLdb 1.先装依赖 yum install zlib-devel ...

  5. Nginx 单个进程允许的最大连接数

    (1) 控制 Nginx 单个进程允许的最大连接数的参数为 worker_connections ,这个参数要根据服务器性能和内存使用量来调整 (2) 进程的最大连接数受 Linux 系统进程的最大打 ...

  6. Oracle数据库死锁和MySQL死锁构造和比较

    最近在复习数据库的事务隔离性,顺便构造了一下在Oracle上和MySQL上的死锁以比较异同. 在Oracle上面的实验 在Oracle中,因为是显式提交,所以默认可以认为在一个会话中若没有使用comm ...

  7. Git删除分支/恢复分支

     • 删除一个已被终止的分支 如果需要删除的分支不是当前正在打开的分支,使用branch -d直接删除 git branch -d <branch_name> • 删除一个正打开的分支 如 ...

  8. SSH设置秘钥登录

    设置 SSH 通过密钥登录 我们一般使用 PuTTY 等 SSH 客户端来远程管理 Linux 服务器.但是,一般的密码方式登录,容易有密码被暴力破解的问题.所以,一般我们会将 SSH 的端口设置为默 ...

  9. Oracle使用笔记(二)

    一.表空间 1.创建表空间 create tablespace db_test --表空间名 datafile 'D:\oracle\product\11.2.0\dbhome_1\oradata\o ...

  10. while RE Validation

    一.简介 为什么需要正则表达式? 文本的复杂处理 正则表达式的优势和用途? 一种强大而灵活的文本处理工具: 大部分编程语言.数据库.文本编辑器.开发环境都支持正则表达式. 正则表达式定义: 正如它的名 ...