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加载图片

4. JS异步相关面试题

console.log(1)
setTimeout(function(){console.log(2)
}, 1000)
console.log(3)
setTimeout(function(){console.log(4)
}, 0)
console.log(5)