JS高级-异步

时间:2023-02-01 18:00:02

单线程

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

  原因:避免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时单线程,异步的本质