1. 异步
1.1 为什么要异步？
JS是单线程语言，只能同时做一件事。JS和DOM渲染共用同一个线程，因为JS可修改DOM结构。当遇到等待的情况时，例如网络请求、定时任务，程序不能卡住。所以需要异步来解决JS单线程等待的问题，异步通过回调callback函数的形式实现。
1.2 异步和同步
同步和异步的区别：异步不会阻塞代码执行，同步会阻塞代码执行。
- 异步
// 异步（callback回调函数）
console.log(100)
setTimeout(()=>{
console.log(200)
}, 1000)
console.log(300)
- 同步
console.log(100)
alert(200)
console.log(300)
不点击弹框的 确认 按钮，就不会执行console.log(300)
2. 异步的应用场景
- 网络请求，如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(){
console.log('loaded')
}
img.src = '/xxx.png'
console.log('end')
- 定时任务，如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)
3. promise的基本使用
3.1 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'
// Promise的基本用法，管道串联的形式
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))
3.2 手写Promise加载图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手写Promise加载图片</title>
</head>
<body>
<script>
function loadImg(src) {
const p = new Promise(
(resolve, reject) => {
const img = document.createElement('img')
img.onload = () => {
resolve(img)
}
img.onerror = () => {
reject(new Error(`图片加载失败 ${src}`))
}
img.src = src
}
)
return p;
}
const url1 = 'https://profile-avatar.csdnimg.cn/fb030a9b9de24f4ba6dd8cd6c094ffcf_zx1041561837.jpg!1'
const url2 = 'https://img-home.csdnimg.cn/images/20201124032511.png'
loadImg(url1).then(img1 => {
console.log('图片1的宽度为：' + img1.width)
return img1 // 普通对象
}).then(img1 => {
console.log('图片1的高度为：' + img1.height)
return loadImg(url2) // promise对象
}).then(img2 =>{
console.log('图片2的宽度为：' + img2.width)
return img2
}).then(img2 => {
console.log('图片2的高度为：' + img2.height)
}).catch(ex => console.error(ex))
</script>
</body>
</html>
4. JS异步相关面试题
console.log(1)
setTimeout(function(){
console.log(2)
}, 1000)
console.log(3)
setTimeout(function(){
console.log(4)
}, 0)
console.log(5)
