javascriptの非同期開発

非同期処理とシングルスレッド

非同期とは

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

console.log(100)
alert(200)
console.log(300)

非同期処理が必要になるのはどのような場合ですか?

1. 待機が発生する場合
2. 待機中はalertのようにプログラムをブロックすることを避けたい時
   なので、「待機の場合」に非同期処理が必要

フロントエンドで非同期開発を使用するシナリオ

1. スケジューリングタスク： setTimeout, setInverval
2. Networkリクエスト: ajaxリクエスト、動的にのload

console.log('start')
$.get('./products',function(data) {
  console.log(data)
}
console.log('end')

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

1. イベントバインディング

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

非同期と同期の違い