课程名称： JS基础-异步
课程章节：Javascript面试课
课程讲师： 双越
课程内容：
学习课程之前，我们先来看一下这节会遇到哪些面试题？
1、异步和同步的区别是什么？
2、手写 Promise 加载一张图片。
3、前端使用异步的场景有哪些？
4、setTimeout 笔试题。
接下来我们一起看看知识点有哪些？ 单线程 ◆JS是单线程语言，只能同时做一件事儿 ◆浏览器和nodejs已支持JS启动进程，如Web Worker ◆JS和DOM渲染共用同一个线程，因为JS可修改DOM结构 ◆遇到等待（网络请求，定时任务）不能卡住 ◆需要异步 ◆回调callback函数形式 异步和同步 ◆基于JS是单线程语言 ◆异步不会阻塞代码执行 ◆同步会阻塞代码执行 ◆网络请求，如ajax图片加载 ◆定时任务，如setTimeout
定时器
最后，复习一下前面提到的面试题
1.异步和同步的区别是什么？
①异步基于JS是单线程语言
②异步不会阻塞代码执行
③同步会阻塞代码执行
2.手写 Promise 加载一张图片
function loadImg(src) {
const p = 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
}
)
return p
}
// const url = 'https://img4.sycdn.imooc.com/623845880001403311101110-140-140.jpg'
// loadImg(url).then(img => {
// console.log(img.width);
// return img
// }).then(img => {
// console.log(img.height);
// }).catch(ex => { console.error(ex); })
// 多图片加载
const url1 = 'https://img4.sycdn.imooc.com/623845880001403311101110-140-140.jpg'
const url2 = 'https://img1.sycdn.imooc.com/54584e2c00010a2c02200220-160-160.jpg'
loadImg(url1).then(img1 => {
console.log(img1.width);
return img1 //普通对象
}).then(img1 => {
console.log(img1.height);
return loadImg(url2) // promise 实例
}).then(img2 => {
console.log(img2.width);
return img2
}).then(img2 => {
console.log(img2.height);
}).catch(ex => console.error(ex))3.前端使用异步的场景有哪些？
①网络请求，如ajax图片加载
②定时任务，如setTimeout
4.setTimeout笔试题
打印的依次是：1 3 5 4 2