第五章 JS基础-异步
题目
- 同步和异步的区别是什么？
- 手写promise加载一张图片？
- 前端使用异步的场景？
- 场景题setTimeOut
知识点
- 单线程和异步
- 应用场景
- Callback hell 和promise
一、单线程和异步
- JS是单线程语言，只能同时做一件事
- 浏览器和nodejs已经支持JS启动进程，如web worker
- JS和DOM渲染共用同一个线程，因为JS可修改DOM结构
- 遇到等待（网络请求，定时任务）不能卡住
- 需要异步
- 回调callback函数形式
// 异步 （callback 回调函数）
console.log(100)
etTimeout(() => {
console.log(200)
}, 1000)
console.log(300)
console.log(400)
// 结果100 300 400 200
// 同步// 异步 （callback 回调函数）
console.log(100)
etTimeout(() => {
console.log(200)
}, 1000)
console.log(300)
console.log(400)
// 结果100 300 400 200
// 同步
console.log(100)
alert(200)
console.log(300)
// 结果 100 200 300
console.log(100)
alert(200)
console.log(300)
// 结果 100 弹框200点击之后才会出现 300（卡住）先执行同步任务，到一定时间或者要求再执行回调函数
异步不会阻塞后面代码的执行，但是同步会
二、应用场景
1. 网络请求，如Ajax图片加载
// ajax
console.log('start')
$get('./data1.json',function(data1){ // 回调函数网络请求
console.log(data1)
})
console.log('end')
// 图片加载
console.log('start')
let img = document.createElement('img')
img.onload = function () { // callback
console.log('onload')
}
img.src = 'xx.png'
console.log('end')2. 定时任务，如setTimeout
// setTimeout
console.log(100)
setTimeout(function () {
console.log(200)
}, 1000)
console.log(300)
// setInterval
console.log(100)
setInterval(function() {
console.log(200)
}, 1000)
console.log(300)三、callback hell回调地狱
是一种越陷越深的嵌套形式
//callback hell
// 获取第一份数据
$get(url1, (data1) => {
console.log(data1)
// 获取第二份数据
$get(url2, (data2) => {
console.log(data2)
// 获取第三份数据
$get(url3, (data3) => {
console.log(data3)
// 获取更多数据
})
})
})解决方法：使用promise
// promise
function getData(url) {
return new Promise((resolve, reject) => {
$.ajax({
url,
success(data) {
resolve(data)
},
error(err) {
reject(err)
}
})
})
}
const url1 = 'data1.json'
const url2 = 'data2.json'
const url3 = 'data3.json'
getData(url1).then(data1 => {
console.log(data1)
return getData(url2)
}).then(data2 => {
console.log(data2)
return getData(url3)
}).then(data3 => {
console.log(data3)
}).catch(er => console.error(err)) // 串联形式
四、问题解答
1. 同步和异步的区别是什么？
异步是基于JS单线程语言
异步不会阻塞代码执行
同步会阻塞代码执行
2. 手写promise加载一张图片？
function loadImg(src) {
const p = new Promise(
(resolve, reject) => { // resolve和reject也是函数
const img = document.createElement('img') // 定义图片
img.onload = () => {
resolve(img)
}
img.onerror = () => {
const err = new Error(`图片加载失败 ${src}`)
reject(err)
}
img.src = src
}
)
return p
}
// const url = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
// loadImg(url).then(img => {
// console.log(img.width)
// return img // img传入then里
// }).then(img => {
// console.log(img.height)
// }).catch(ex => console.error(ex))
const url1 = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
const url2 = 'https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg'
loadImg(url1).then(img1 => {
console.log(img1.width)
return img1 // return普通对象，then直接接收
}).then(img1 => {
console.log(img1.height)
return loadImg(url2) // promise 实例，则then之后接收到的是loadImg()执行完的img对象
}).then(img2 => {
console.log(img2.width)
return img2
}).then(img2 => {
console.log(img2.height)
}).catch(ex => console.error(ex))3. 前端使用异步的场景？
网络请求，如Ajax图片加载
定时任务，如setTimeout
4. 场景题setTimeOut
// setTimeou笔试题
console.log(1)
setTimeout(function() {
console.log(2)
}, 1000)
console.log(3)
setTimeout(function() {
console.log(4)
}, timeout)
console.log(5)
// 结果1 3 5 4 2五、小结
1. 单线程和异步,异步和同步的区别
2. 前端异步应用场景：网络请求&定时任务
3. promise解决 Callback hell
