#20.非同期プログラミング(2)

ひどうきプログラミング

この文書では、JavaScriptで非同期タスクを処理する方法について説明します.
コールバック技術を紹介します.
まず,非同期タスクはsettimeoutで処理する.

console.log('1') // 동기

setTimeout(() => console.log('2'), 0) // 비동기

console.log('3') // 동기

setTimeout(() => console.log('4'), 0) // 비동기

// 실행 결과 = 1 3 2 4

次に、非同期タスクを処理するためにコールバックが必要な理由を見てみましょう.

const moveLeft = () => {
	setTimeout(() => console.log('left'), 10)
}

const moveRight = () => {
	setTimeout(() => console.log('right'), 30)
}

上記の例は、キャラクタを移動するコードです.
左へ10ミリ秒、右へ30ミリ秒かかります.
キャラクタ移動の動作は非同期です.
このコードを使用して、キャラクタを右、左、右、左の順に移動します.

moveRight()
moveLeft()
moveRight()
moveLeft()

// 실행 결과 : left, left, right, right

みんな予想していたはずです.そうすれば、私たちは予想通りに行動しません.
以上のことから,非同期操作では実行順序が保証されないという問題がある.
この問題を解決するために現れたのがcallbackです.
では、callbackを適用して問題を解決しましょう.

const moveLeft = (cb) => {
    setTimeout(() => {
    	console.log('left')
        
        if(cb){
          cb()
        }
    }, 10)
}

const moveRight = (cb) => {
    setTimeout(() => {
        console.log('right')
        
         if(cb){
          cb()
         }
    }, 30)
}

moveLeft,moveRightはcb(関数)をパラメータとして受け入れる.
操作が完了した後にcallbackを呼び出すことで、非同期操作の順序を保証できます.
ここで、callbackが追加されたmoveLeftとmoveRightにキャラクタを移動します.

// 실행 코드

moveRight(function() {
    moveLeft(function() {
        moveRight(function() {
            moveLeft()
        })
    })
})

// 실행 결과 : right, left, right, left 

// 우리가 원하는 대로 동작하는 것을 확인할 수 있다.

このようにcallbackは、非同期動作の順序を保証するために使用される.
しかし、コールバック技術には非常に深刻な問題がある.
それはコールバックが重なると可読性が悪いということです.
もちろん、今はそう思わないかもしれません.
左右左右左右に動くコードを書いてみましょう
もちろんarrow functionを使うとより簡潔になりますが、可読性が低下するのは事実です.
今日はこれで終わります.次の授業ではcallback hellの解決方法を紹介します.