写在前面：本文内容主要根据慕课网双越老师的付费课程“一天时间迅速准备前端面试 快速构建初级前端知识体系 ”进行编写，主要是为了自己在面试前总结学习，欢迎留言指教。
本系列包括如下内容：
每一部分包括题目和知识点两部分。
异步和单线程
题目
- 同步和异步的区别是什么
- 手写用promise加载一张图片
- 前端使用异步的场景有哪些 2 等待的场景
- 场景题，1 2 3 4 5 打印次序 1 3 5 4 2
1. 同步和异步的区别是什么
- 基于JS是单线程语言
- 异步不会阻塞代码执行
- 同步会阻塞代码执行
2. 手写用promise加载一张图片
function loadImg(src) {
return new Promise((resolve, reject) => {
const img = document.createElement('img')
img.onload = () => {
resolve(img)
}
img.onerror = () => {
const err = new Error(`图片加载失败 ${src}`)
reject(err)
}
img.src = src
}
)
}
3. 前端使用异步的场景有哪些
主要有两种应用场景，分别为：
- 网络请求，如ajax 图片加载
- 定时任务，如setTimeout
4. 场景题
打印次序： 1 3 5 4 2
先处理同步函数，再处理异步函数
知识点
1. 单线程和异步
- JS是单线程语言，只能同时做一件事，这是JS的局限；
- 浏览器和nodejs已支持JS启动进程，如 Web Worker；
- JS和DOM渲染共用同一个线程，因为JS可修改DOM；
- 但我们希望遇到等待（网络请求，定时任务）不能卡住，因此我们需要异步；
- 异步都是回调callback函数形式。
2.异步和同步的区别
- 基于JS是单线程语言
- 异步不会阻塞代码执行
- 同步会阻塞代码执行
// 异步 callback 回调函数
console.log(100)
setTimeout(() => {
console.log(200)
}, 1000)
console.log(300) // 100 300 200
// 同步
console.log(100)
alert(200)
console.log(300) // 100 200 300 同时alert会阻塞300的输出
3. 前端异步的应用场景
主要有两种应用场景，分别为：
- 网络请求，如ajax 图片加载
- 定时任务，如setTimeout
// ajax
$.get('data.json', function(data){
console.log(data)
})
// 图片加载
let img = document.createElement('img)
img.onload = function () {
console.log('loaded')
}
img.src = 'xxx.png'
// setTimeout
console.log(100)
setTimeout(function () {
console.log(200)
})
console.log(300)
// setInterval
console.log(100)
setInterval(function () {
console.log(200)
})
console.log(300)
4. callback hell和promise
如果我们想要根据获取的data1，来获取data2，再根据获取的data2来获取data3，那么就会形成callback hell：
这时，我们就需要promise来解决callback hell。
所以，我们对上面的代码进行如下改写：
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(err => console.error(err))
这样呢，callback hell的嵌套形式就变成了管道形式。