同步和非同步的區別是什麼？分別舉一個同步和非同步的例子

• 同步會阻塞程式碼執行,而非同步不會
• alert 是同步,setTimeout 是非同步

一個關於 setTimeout 的筆試題

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

前端使用非同步的場景有哪些

• 定時任務:setTimeout,setInverval

• 網路請求:ajax 請求,動態載入

  //ajax請求
  console.log('start')
  $.get('./data1.json', function(data1) {
    console.log(data1)
  })
  console.log('end')
  
  //動態<img>載入
  console.log('start')
  var img = document.createElement('img')
  img.onload = function() {
    console.log('loaded')
  }
  img.src = '/xxx.png'
  console.log('end')
  

• 事件繫結

  console.log(
   
  'start')
  document.getElementById('btn1').addEventListener('click', function() {
    console.log('clicked')
  })
  console.log('end')
  

非同步和單執行緒

• 執行第一行,列印 100

• 執行 setTimeout 後,傳入 setTimeout 的函式會被暫存起來,不會立即執行(單執行緒的特點,不能同時幹兩件事)

• 執行最後一行,列印 300

• 待所有程式執行完,處於空閒狀態時,會立馬看有沒有暫存起來的要執行

• 發現暫存起來的 setTimeout 中的函式無需等待時間,就立即來過來執行

  console.log(100)
  setTimeout(function() {
    console.log(200)
  })
  console.log(300)