(JS)callback&非同期呼び出し

12793 ワード
JavaScript JavaScript js テキストリンク
JavaScriptの関数が他の言語の関数と異なる点は、関数が値であってもよいことです.
関数は値として使用できます.keyとして変数逆活動も可能である.
オブジェクトで変数を逆方向に使用することを属性、propertyと呼び、属性に格納された値
関数であればメソッドと呼びます.
関数が値の場合、他の関数のパラメータとしてなしに渡すことができます.関数は、関数の戻り値として使用したり、配列の値として使用したりできます.

ダイヤルバック

function B() {
  console.log('called at the back!');
}

function A(callback) {
  callback(); // callback === B 
}

A(B);
別の関数Aに伝達される伝達パラメータの関数Bは、パラメータの関数Aに伝達される.
関数Bは、必要に応じて直ちに実行してもよいし、後で実行してもよい.

例

function sortNumber(a, b) {
  if (a > b) {
    return 1;
  } else if (a < b) {
    return -1;
  } else {
    return 0;
  }
}
let numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
alert(numbers.sort(sortNumber));
//여기서 sortNumber 함수를 콜백 함수라고 한다.
  • callback in action:反復実行関数(反復器)
    • [1, 2, 3].map(function (element, index) {
  return element * eleement
});
  • callback in action:イベントベースの関数(イベントハンドラ)
    • documebt.querySelector('#btn').addEventListner('click', function(e) {
  console.log('button clicked');
});

    用法O、X

    function handleClick() {
   console.log('button clicked');
};
document.querySelector('#btn').onclick = handleClick; // (o)
document.querySelector('#btn').onclick = function() {
   handleClick();
}                                                     // (o)
document.querySelector('#btn').onclick =handleClick.bind(); // (o)
document.querySelector('#btn').onclick = handleClick();  // (x)

    非同期処理


    コールバックは非同期処理にも役立ちます.
    タスクが完了するのに時間がかかる場合は、タスクが完了した後に処理するコールバックを指定します.
    このタスクが完了したときに、事前に登録されたタスクを実行できます.
    動機:逐次漸進的なやり方
    非同期:作業の委任と待機

    タイマAPI

    setTimeout(callback, millisecond)一定時間後に関数を実行します.
  • パラメータ:実行するコールバック関数、コールバック関数の実行前に待機時間(ミリ秒)
  • 戻り値:任意のタイヤID 
    • setTimeout(function() {
  console.log('1초 후 실행');
}, 1000);
// 123
    setInterval(callback, millisecond)関数を一定時間間隔で繰り返し実行します.
  • パラメータ:実行するコールバック関数、繰り返し実行関数の時間間隔(ミリ秒)
  • 戻り値:任意のタイヤID 
    • setInterval(function() {
  console.log('1초마다 실행');
}, 1000);
// 345
    clearInterval(timeId)繰り返し実行のタイマーを終了
  • パラメータ:タイマID
  • 戻り値:
    • なし
    let timer = setInterval(function() {
  console.log('1초마다 실행');
}, 1000);
clearInterval(timer);
// 더 이상 반복 실행되지 않음
    Javaコレクション:CopyOnWriteArrayListとSynchronizedList
    シンプルなサーバの作成