题目
- 同步异步和同步和异步的区别是什么？
知识点 异步和同步
- 手写用promise加载一张图片
const url = `xxx`
function loading(src) {
return new Promise ((reslove,reject)=>{
const img = document.createElement('img')
img.onload = () => {
resolve(img)
}
img.onerror = ()=>{
reject(new Error(`加载失败 ${src}`))
}
img.src = src
})
}
loadImg(url).then(img=>{
console.log(img.width)
return img
}).then(img=>{
console.log(img.height)
}).catch(ex=>{
console.error(ex)
})
- 前端使用异步的场景
知识点 应用场景
知识点
- 单线程和异步
单线程
- JS是单线程语言，只能同时做一件事情
- 浏览器和nodejs已经支持JS启动进程，如Web Worker
- JS和DOM渲染共用同一个线程，因为JS可修改DOM结构 异步和同步
- 基于JS是单线程语言
- 异步不会阻塞代码执行
- 同步会阻塞代码执行
- 应用场景
- 网络请求，如ajax图片加载
// ajax
conseol.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
