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

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);
// 더 이상 반복 실행되지 않음