首先Js是一款单线程语言,只能去做一个事情。
异步就是用来处理阻塞的,而同步才导致了阻塞这种现象。
同步:你在取票。前面有很多人,你需要排队等待,但是不能做别的。
异步:在排队的时候,可以玩手机。
1.应用场景
网络请求:如AJAX图片加载
console.log('start')//打印start
$.get('./data.json',function(data1){//执行网络请求
console.log(data1)
})
console.log('end')//最后打印结果
定时任务:如setTimeout
当有两个出现的时候,CPU是空闲的,你不能浪费CPU的时间。所以就有了异步的出现。
console.log('start') //打印start
let img = document.createElement('img');
img.onload = function () {
console.log('loaded')//加载图片过后打印
}
img.src = '/xxx.png'//加载图片
console.log('end')
2.callback hell 呼叫地狱
//获取第一份数据
$.get(url, (data1) => {
console.log(data1);
//获取第二份数据
$.get(url, (data2) => {
console.log(data2);
//获取第三份数据
$.get(url, (data3) => {
console.log(data3);
//获取第N份数据
})
})
})
callback hell 促使了 Promise的产生。
那么Promise产生,就解决了callback嵌套的形式,变成了一种管道式的串联的形式
const url1='/data1.json'
const url2='/data2.json'
const url3='/data3.json'
getData(ur1).then(data1 =>{
console.log(data1)
return getData(url2)
}).then(data2 =>{
console.log(data2)
return getData(url3)
}).then(data3 =>{
console.log(data3)
}).catch(err =>console.error(err))
看一道例题
//setTimeout 笔试题
console.log(1)
setTimeout(function () {
console.log(2)
}, 1000)
console.log(3)
setTimeout(function () {
console.log(4)
}, 0)
console.log(5)
例题解析
首先:有异步先把异步放下,先看其他的
所以先打印1,3,5
然后:看异步,有2和4。2延迟1s,4无延迟,4先打印。
所以打印4,2
答案为:1.3.5.4.2
网友评论