🐭 今日は何を説明しますか。

1.同期と非同期

JavaScriptを使用してデータを処理する際に使用される同期と非同期の処理方法を説明してみます.非同期関数を使用したことがありますが、その概念はよくわかりません.この機会に、同期と非同期関数の違いと非同期関数のコールバック関数の概念を簡単な例で説明します.私はあなたに命令します.

同期(Synchronous)

動機は作成された順序で実行され、最初に読み込まれた順序で順次表示され、前の関数が完了してから次の関数を実行する必要があります.

非同期

javascriptは単一スレッドなので、一度に1つのタスクしか実行できません.この問題を解決するために、非同期処理が発生しました.非同期は作成の順序で実行されず、まず私が望んでいる関数を呼び出したり、タスクの位置を変更したりすることで時間の無駄を減らしたりします.すべてのタスクをKing方式で同時に実行し、処理速度を向上

🐭 しかし、これはBlockNon-Blockingと同じ概念ではないでしょうか。

2. Blocking & Non-blocking

上の動機と非動機は時間の観点から見ることができ、ブロックと非ブロックは制御権の観点から見ることができ、ブロック状態にあるかどうかを考慮することができ、上の写真を通じて各キャラクタを比較することができ、通常は(block+synchronous)、(non-block+asynchronous)よく見られるモードである.

同期非同期ロックNon-blockingについて

次の例を参照して、各ロールの詳細を確認し、Non-blocking&Asynchronousの組み合わせが最も効果的な方法であることを確認できます.

🐭 私は非同期についてまだよく知らないので、例を挙げます。

3. setTimeout

Javascriptの最も代表的な非同期処理方法では、setTimeout()が後続の関数を実行し、本人は一定時間後に関数を実行し、setTimeout()には2つのパラメータがあり、1つ目は一定時間後にコールバック関数を実行し、2つ目のパラメータは数秒後に実行する.コードの使用方法については、例を参照してください.

setTimeout(() => { /* 실행코드 */ } , delay)

家事

今は창문 닦기, 빨래하기, 방 청소の3種類を順番に行います.例を挙げると、動機を例にとると洗濯機を回す必要がありますが、洗濯機が動いている40分以内は何もしないで待っていなければなりませんが、非同期作業であれば洗濯機が動いている間に部屋の清掃を完了しなければなりません.これから洗濯機を洗ってから洗濯物を干して、仕事は終わります.


結果が示すように、非同期を使用すると、タスクを実行するときに他のタスクを移行でき、時間を節約できます.部屋の掃除が必要になる場合があります.

🐭 違いは理解できますが、非同期プログラミングはまだ理解できません。

4.非同期処理

上記の説明では、非同期は単一スレッドjavascriptで非同期関数を使用してこの問題を解決し、典型的な処理方法の1つはsetTimeout()であり、非同期処理の様々な方法を紹介し、非同期制御がどのように発展しているかを理解する.

非同期の例

マウス、キーボード入力(クリック、キーなど)

タイマAPI(settimeout等)

fetch API , AJAX

コールバック関数

以前はsetTimeout()でコールバック関数を最初のパラメータとして使用していましたが、コールバック関数は後で呼び出される関数を指し、指定された関数が実行されると、後の関数が実行状態になり、settimeoutにdelayを掛け、その時間後に関数が出力されます.

function 콜백할함수() {
  setTimeout(() => {
    alert("안녕");
  }, 2000);
}

🐭 コールバック関数を渡すときに繰り返し使用する必要がある場合もこの方法を使用しますか?

地獄

上記のように簡単にロールバック処理すれば問題ありませんが、非同期プログラミングの場合、実行順序を工夫すると多くの関数が必要になります.特定の値を検索するために多くの関数が必要な場合、コードをどのように書くべきか、次のようなコードが生成される可能性があります.

以上、大学生Aの高校3年生の時に数学教師を担当する教師名のコードを探し出す.
1.大学生Aの学号入力関数
2.学生の身分証明書番号と高校名の関数を学号で検索する
3.高校名でAの必修科目を出力する関数
4.授業中に数学を探し出し、数学の授業コードの関数を探し出す
5.このコースコードを担当する教師の名前を出力する関数
5つの関数はすべて1つの場所にあり、私たちはそれをコールバック地獄と呼んでいます.これにより、コードを書く可読性が大幅に低下し、JavaScript ES 6以降でPromiseが生成されます.

Promise

ES 6から導入されたPromiseは、非同期操作を実行する関数がプロセス内のオブジェクトに戻ることを示し、作成者は2つのパラメータを含み、1つ目は非同期操作を実行する2番目のパラメータであり、処理の結果をコールバック関数に渡す関数を含み、解析の成功と拒否の失敗を招く可能性がある.もしそうなら、Promiseを使用してコードを作成します.

大学生Aの学号を入力する関数を利用して、この関数を利用して、スクリーニングの方式に従って順次非同期の任務を処理することができて、結果は同じで、しかし更に直観的で、可読性はもっと良くて、それによって考白の獄を逃れました.

🐭 だいぶよくなりましたが、私はまだ複雑に見えます。

async/await

これはES 8から導入されたasync/awaitであり、同期コードのように、特にPromiseで使用される後続の処理方法がない場合に処理結果を返す非同期関数の動作を実現することができる.awaitはasyncでしか動作しないので、必ず関数の前にasyncを入れなければならないので、async/awaitを使用してコードを書き直します.

awaitを使用して変数をインポートし、次の関数を実行できます.

callback地獄とasync/awaitの2つを比較すると、より大きな感じがします.

データ・コードの表示

ハブリンク

ヘルプリソース

JavaScriptはなぜ単一スレッドですか?https://chanyeong.com/blog/post/44
同期、非同期、block&non-blocking-https://musma.github.io/2019/04/17/blocking-and-synchronous.html
非同期プログラミング-https://www.youtube.com/watch?v=m0icCqHY39U