Callback Functions

1.JavaScriptでは、関数がオブジェクトです

関数パラメータを使用してオブジェクト、関数を追加できます.

2.javascript上から下へのコードの実行

これらの特性のため、私たちはたまに非同期プログラミングを通じていくつかのことや関数を非同期で処理したいと思っています.例えば、洗濯機で回転する服は洗濯機から出なければなりませんが、これらの服を乾燥機に入れて回転することができます.でも服が出る前に乾燥機の電源ボタンを押して、乾燥機は服を受け取る準備(?)できる.

3.calback関数によって、問題とエラーを予防することができます。

あることを先に処理し、それが実行された直後にCalback関数を実行するように設定できます.

Calback関数の作成

const message = function() {  
    console.log("This message is shown after 3 seconds");
}
 
setTimeout(message, 3000);

Anonymous Functionとして処理:

setTimeout(function() {  
    console.log("This message is shown after 3 seconds");
}, 3000);

💡 Anonymous Function?

呼び出す必要はありません.1つの関数で別の関数を直接宣言できます.このように関数のない「名前」を宣言することからAnonymousすなわち「匿名」関数と呼ぶ.
Arrow Function:

setTimeout(() => { 
    console.log("This message is shown after 3 seconds");
}, 3000);

💡 イベントベースのプログラミング言語と同様にJavaScriptでは、callback関数はイベントを宣言する際にも使用できます.このコードでは、最初のパラメータはタイプで、2番目のパラメータはcallback関数です.

document.queryselector("#callback-btn")
    .addEventListener("click", function() {    
      console.log("User has clicked on the button!");
});

同期と非同期?

💡 JavaScriptは同期化されています

すなわち、コードブロックは、リフトが発生した後から1つずつ同期して実行される.

どうきしょり

コードを順番に実行

非同期処理

進捗:setTimeout()関数でブラウザapiに要求を送信し、3秒後に'비동기 얍!'を処理する.
コード解析:setTimeout()関数のパラメータで関数を渡し、今すぐ実行しないで、後で呼びます.(callback)

コールバックも同期、非同期に分けられます

同期コールバック:printImmediately()は関数をパラメータとして受け入れます.このパラメータとして受信された値については、printImmediately() callback関数が同期して直ちに実行されます.

非同期コールバック:printDelay()は、関数とタイムアウト時間をパラメータとして受け入れます.パラメータが受け入れる値をsetTimeout()関数に入れて実行します.setTimeout()関数のため、この関数は非同期で処理され、2000秒後に再コールバックされる.

ちょっと待って。では、JavaScriptエンジンはどのようにコードを処理し理解しますか?

最初に宣言された関数は、アップグレードによって最上位の

に上昇します.

の同期処理から、急いで

を実行する.

非同期処理setTimeout()関数時間設定毎に非同期運転

を実行する.
Reference:
https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/
https://www.youtube.com/watch?v=s1vpVCrT8f4