Asynchronous

题目：

• 同步和异步的区别是什么
• 手写用promise加载一张图片
• 前端使用异步的场景有哪些

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

知识点

• 单线程和异步
• 应用场景
• callbacck hell 和Promise

JS是一个单线程语言，只能同时做一件事

• 浏览器和nodejis已支持js启动进程
• JS和DOM渲染共用同一个线程，因为JS可以修改DOM结构
• 遇到网络等待，定时任务，浏览器不能卡住

所以需要异步
基于callback函数形式
异步不会阻塞代码执行
同步会阻塞代码执行

//异步
console.log(100)
setTimeout(function(){
    console.log(200)
},1000)
console.log(300)
//同步
console.log(100)
alert(200)
console.log(300)

应用场景

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

• 定时任务，如setTimeout

  //ajax        
  console.log('start')
  $.get('./data1.json',function(data1){
      console.log(data1)
  })
  console.log('end')
  
  //图片加载        
  console.log('start')
  let img = document.createElement('imag)
  img.onload =function(){
      console.log('loaded')
  }
  img.src='/xxx.png'
  console.log('end')
  

//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)