29、同步和异步

//异步
console.log(1)
setTimeout(()=>{
  console.log(2)
},1000)
console.log(3)

//同步
console.log(1)
alert(2)
console.log(3)

• 同步和异步的区别是什么
  • 基于js是单线程语言
  • 异步不会阻塞代码执行
  • 同步会阻塞代码执行
• 手写Promise加载一张图片

const src = '../xxximg.png'

function loadImg(){
  return new Promise((resolve,reject)=>{
    let img = document.createElement('img')
        img.onload = function(){
          console.log('loaded')
          resolve(img)
        }
        mg.onrror = function(){
      reject(new Error(`图片加载失败${src}`))
        }
        img.src = src
  })
}

loadImg().then(img=>{
  console.log(img)
  return img
}).catch(err){
  console.log(err)
}

• 前端使用的异步的场景有哪些

  • 网络请求，比如：ajax图片加载

    onsole.log('start')
    let img = document.createElement('img')
    img.onload = function(){
      onsole.log('loaded')
    }
    img.src = './xxx.png'
    console.log('end')
    

  • 定时任务，比如：setTimeout

知识点

• 单线程和异步（异步是由单线程这个背景来的）

  • JS是单线程语言，只能同时做一件事
  • 浏览器和nodejs已支持Js启动进程如web worker。但是并不能改变js是单线程的本质
  • Js和dom渲染共用同一个线程，因为js可以修改dom结构
  • 遇到等待（网络请求、定时任务）不能卡住

• 需要异步，解决单线程的问题
• 回调callback函数形式