コールバック関数と非同期処理

12667 ワード
テキストリンク
JavaScriptは同期されています.
=>hoistingになってから、コードは私たちが書いた順番に同期して実行されます.
  • 号給油?筆者が整理したベイク処理 varfunction declarationこれらの宣言は自動的に1位に上昇した.
    したがって,エスケープからコードは出現する順序で自動的に1行実行される.

    • CallBack関数


    コールバック関数は、関数のパラメータに入る関数です.
    また、
    =>成功した結果を受け入れる関数.
    用途:JSでいくつかの操作を順番に実行する場合によく使用される設計モード
    特長
  • 他の場所で作成された関数もコールバック関数として使用できます.
    • document.querySelector('.button').addEventListener('click', 함수명);
  • コールバック関数が必要な関数にのみ適用されます.
    ex)map、filter、addEventListener等
    • .
    関数には同期関数と非同期関数があります.
  • 同期関数:コード書き込み順で実行される関数
    • ex)if節、while環、for環、いくつかのコールバック関数など
  • 非同期関数
    ex)いくつかのコールバック関数=>setTimeout、onclickなど
    ex)addEventListener 
    document.querySelector('.button').addEventListener('click', function(){
  alert('깔깔깔깔깔깔!!!'); // 버튼을 클릭시, 이거 실행됨
  // 순차적으로 실행되죠?? 콜백이니까...
})
    setTimeout 
    setTimeout( function() {
  console.log('깔깔깔깔깔깔!!!'); // 1초 후에, 실행해죠. 순차적이죠?? 콜백이니까...
}, 1000)

    コールバック関数は同期および非同期で実行できます。


    上記のコード例に示すように、システムが呼び出す関数は、特定のイベント(exボタン)が発生したり、ある時点に到達したりしたときにコールバック関数である.
    しかし、これはすべてのコールバック関数が非同期であることを意味するものではありません.コールバック関数には同期関数も存在します.ただし、非同期処理をサポートする関数は、たまにコールバック関数を要求します.
    次の例を見てください.

    Case 1)コールバック関数ですが、同期時



    上記のfakeSetTimeout()コールバック関数は、関数が呼び出される順序で出力される.

    Case 2)非同期コールバック関数


    次に、代表的な非同期関数setTimeout()を使用します.

    =>ちょっとおかしいです.setTimeout()関数の起動時間も0秒なのに、line 14でやったのに・・・最後に起動します.どうしてこんなことになったの?
    この部分はイベントループ時間の時に、もう一度ご理解ください!!

    コールバック関数がJSで重要な理由


    Javaスクリプトにコールバック関数が存在する理由は、大きく2つあります.
    まずmap,reduce,fliterなどの重要な方法はコールバック方式で作成される.
    第二に、非同期でプログラミングすることができます.

    コールバック関数の動作原理


    コールバック関数は、順次実行したいときによく使われる設計モードです.
    コールバック関数を直接作成すると、次のようになります.
    function first( a ){
  console.log('first');
  a();
}

function second(){
  console.log('second');
}

// 이렇게하면, first() 다음에 second()가 실행되도록 할 수 있다. 
first(second);
    具智はそうする必要があるのか.
    このようにしても、結果は同じです.
    first();
second();
    しかし、コラボレーション時にはダイヤルバックの強力な機能を発揮します.
    特定のコードを安定して確実に順番に実行します.
    例えば、筆者はfirst()を創りましたが、あまりにも役に立つので、他の人が持って使っています.
    しかし、開発者Aがfirst()の後にconsole.log(1)を運転したい場合、どうすればいいのでしょうか.
    直観的に言う.
    first();
console.log(1);
    このようにして実現することができるが、first()が非同期であれば、順次動作することはできない.
    信頼できる安全なパンでfirst()をアップグレードすればいいです.
    パラメータをfirst( 파라미터 )に追加します.
    function first( 파라미터 ){
  console.log('first');
  파라미터();
}

function second() {
  console.log(1);
}

first(second);
    これにより、コールバック関数モードを使用すると、必要なコードを安全に順番に実行できます.

    コールバック関数の問題Callback Hell



    たとえば、
    最も多くのコールバック関数が現れるDBからデータを抽出したい場合は?
    DBからA、B、Cを引く
    db.collection('post').findOne(A, function(){
  db.collection('post').findOne(B, function(){
    db.collection('post').findOne(C, function(){
      ... // 대충 이런 코드가 나온다.
    })
  })
})
    しかし、これではコードが右側に長くなりすぎます.
    仕方がない.JS長どうしよう...
    =>特にJavaScriptを使用してサーバを開発する場合、このモードは非常に一般的です.
    このようにコールバック関数を使用し続けると、コードが長すぎて、それを読む人が地獄の味を味わうことを意味し、コールバック地獄と命名されます.
    callback地獄の問題
    1.毒性低下.
    2.可読性が悪いと、エラーが発生した場合にデバッグが困難になります.
    3.チェーンが長ければ長いほど、問題の分析とデバッグが難しくなります.
    4.最終的には、メンテナンスも難しい.ううう
    毒性が低すぎるためES 6にPromiseが出現し、Promise chainingが長くなるとcallbackと変わらない.
    だからasync & awaitのように、コードを同期して書くような感じもします.
    次の授業では、コルバー地獄で私たちが救うPromiseとasync & awaitを理解しましょう.

    リファレンスとソース

  • コード状態学習資料
  • 韓国語でコールバック関数が何であるかを簡単に説明するビデオ
  • Promise(Promise)、わかりやすい
  • asyncが待っていて、本当によかった...これはどうしていいのですか。
  • プロセスとasync waitを利用して、非同期概念を拡張します
  • 非同期処理の起動コールバックを理解し、コールバック地獄を体験する
  • JavaScript Promiseコンセプトから使用へ
  • 非同期花JavaScript async、wait、および有用なPromise API
    • VBAスクリプトのコレクション【Excelのsheet名によるソート】
    エコー文字列(二点、文字列を使用)