同期/非同期/コールバック



  • コールバック関数
    後で渡す関数を呼び出します
    パラメータを他のコードに渡し、実行ポイントをその関数に委任します.

  • 動機.Javascript同期言語コードがエスケープされて順次実行されることを同期と呼ぶ.호이스팅コード実行時に変数・関数宣言文が最上位に上がることを意味する

  • 非同期
    コードがいつ実行されるか予測できない状態を非同期と呼びます.
  • 同期/非同期の例
    console.log('1'); //동기
    
    setTimeout(() => {
        console.log('2');  //비동기
    }, 1000);
    
    console.log('3'); //동기
    =>1
      3
      (1초뒤에) 2
  • Javascript言語は上から順にコードを読み、実行する.
  • よってconsole.log出力1
  • setTimeoutブラウザですAPIですので先にブラウザにお願いします.
  • console.log出力3ブラウザのコールバック関数に応答して所定時間に値を出力します.2
  • コールバック関数には非同期だけでなく同期もあります
    console.log('1'); //동기
    setTimeout(() => {
        console.log('2');  //비동기
    }, 1000);
    console.log('3'); //동기
    //동기적 콜백
    function printImmediately(print){
        print();
    }
    // print라는 콜백을 받아서 바로 실행한다.
    printImmediately(() => console.log('hello'))
    //비동기적 콜백
    function printWithDelay(print, timeout){
        setTimeout(print, timeout);
    }
    printWithDelay(() => {
        console.log('async callback')    
    }, 2000);
    コード実行プロセス
    호이스팅에 의해 함수 선언문이 최상단으로 온다.
    function printImmediately(print){
        print();
    }
    function printWithDelay(print, timeout){
        setTimeout(print, timeout);
    }
    
    console.log('1'); //동기
    setTimeout(() => {
        console.log('2');  //비동기
    }, 1000);
    console.log('3'); //동기
    
    printImmediately(() => console.log('hello')) //동기
    printWithDelay(() => {
        console.log('async callback')    //비동기
    }, 2000);
    => 1
       3
       hello
       2
       async callback