本帖最后由 逆风TO 于 2020-4-22 10:42 编辑
JS前端面试-异步和单线程
一、单线程和异步
二、应用场景
三、callbeck hell（回调地狱）和promise
四、问题解答
1.同步和异步的区别是什么？
2.手写promise加载一张图片
3.前端使用异步的场景
4.场景题setTimeout
五、小结
题目
1.同步和异步的区别是什么
2.手写promise加载一张图片
3.前端使用异步的场景
4.场景题setTimeout
知识点
1.单线程和异步
2.应用场景
3.Callback hell和promise
一、单线程和异步
1.JS是单线程语言，只能同时做一件事情
2.浏览器和nodejs已经支持js启动线程，如web worker
3.JS和DOM渲染同一个线程，因为JS可以修改DOM结构
4.遇到等待（网络请求，定时人物）不能卡住
5.需要异步
6.回调callback hell 函数形式
[Java] 纯文本查看 复制代码 // callback 回调函数
console.log(100)
setTimeout(() => {
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图片加载 [Java] 纯文本查看 复制代码 // 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 [Java] 纯文本查看 复制代码 // 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)
三、callbeck hell（回调地狱）和promisecallback hell:一种越陷越深的嵌套形式 [Java] 纯文本查看 复制代码 //callback hell
// 获取第一份数据
$get(url1, (data1) => {
console.log(data1)
// 获取第二份数据
$get(url2, (data2) => {
console.log(data2)
// 获取第三份数据
$get(url3, (data3) => {
console.log(data3)
// 获取更多数据
})
})
})
解决方法：使用promise[Java] 纯文本查看 复制代码 // 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(err => console.error(err)) // 串联形式
四、问题解答1.同步和异步的区别是什么？异步是基于JS单线程语言 异步不会阻塞代码的执行 同步会阻塞代码的执行 2.手写promise加载一张图片[Java] 纯文本查看 复制代码 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(err => console.error(err))
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(err => console.error(err))
3.前端使用异步的场景网络请求，如ajax图片加载
定时任务，如setTimeout setInterval 4.场景题setTimeout
[Java] 纯文本查看 复制代码 // setTimeou笔试题
console.log(1)
setTimeout(function() {
console.log(2)
}, 1000)
console.log(3)
setTimeout(function() {
console.log(4)
}, 0)
console.log(5)
// 结果1 3 5 4 2
五、小结1.单线程和异步，异步和同步的区别
2.前端异步应用场景，网络请求和定时任务
3.promise解决 callback hell
| 
收藏
淘帖
踩
