Callback

概要

ネットワーク上でユーザの行動を事前に予測することは不可能である.クリック
タッチパネルなのかタイピングなのか分からないので、非同期で実行する必要があります.
JAvascriptエンジンは1つのスレッドでのみ動作し、一度に1つのことしかできません.これは利点でも欠点でもあり,マルチスレッド分野の問題を考慮する必要はない.
コールバックはPrimisとGeneratorと共に非同期プログラミング方法論で言及され,コールバックが最も早く現れ,残りはその後に続いて非同期使用に用いられる.
レストランは満席の状態で、お客様が待っている間に電話番号をレストランに渡すと、コールバックやレストランがお客様に電話機を振動させる状況がPromiseと似ていると考えられます.

基本構文

コールバックは、後で呼び出す関数を表します.たとえば、他の関数のパラメータとして渡されたり、オブジェクトのpropertyとして使用されたりします.

console.log("Before timeout: " + new Date());
function f(){
  console.log("After timeout: " + new Date());
}

setTimeout(f, 60*100); // 콜백함수 호출
console.log("after setTimeout 1");
console.log("after setTimeout 2");

コンソールで実行した結果は次のとおりです.settimeoutにfをコールバック関数として追加し、6秒後に実行します.fを同期処理すると、次の動作も一時停止状態で6秒待ち、順次出力され、ユーザに大きな不便を与える.

Before timeout: Wed Oct 28 2020 21:34:45 GMT+0900 (대한민국 표준시)
after setTimeout 1
after setTimeout 2
After timeout: Wed Oct 28 2020 21:34:51 GMT+0900 (대한민국 표준시)

コールバックは、通常、関数宣言で最初に使用されるのではなく、以下に示すように、他の関数のコールバックで匿名関数を使用します.

setTimeout(function(){
  console.log("After timeout: " + new Date());
}, 60*100);

また,代表的なコールバックをパラメータとして受け入れる関数としてはsetInterval,clearIntervalなどがある.

const start = new Date();
let i = 0;
const intervalId = setInterval(function(){
  let now = new Date();
  if(now.getMinutes() !== start.getMinutes() || ++i > 10){
    return clearInterval(intervalId);
  }
  
  console.log(`${i}: ${now}`);
}, 5*1000);

∙setInterval:指定した周期に従ってコールバック関数を呼び出し、clearIntervalが使用されるまで実行を停止します.以上のコードは、実行10秒まで現在の時間を出力します.

スキャナと非同期で実行

function countdown(){
  console.log('countdown:');
  // let i; 유효 스코프 범위 밖
  for(let i = 5; i >= 0; i--){
    setTimeout(function(){
      console.log(i === 0 ? '5초 경과' : i);
    }, (5 - i) * 1000);
  }
}
countdown();

ここでsettimeout自体は同期実行であり、呼び出しのコールバックは「非同期実行」である.ポイントは、コールバックがどのscopeで宣言されるかによって、コールバックは自分のscope(ここではfor文)を宣言するiにアクセスできることです.

コールバックhell(callback hell)

const fs = require('fs');

fs.readFile('a.txt', function (err, dataA) {
  if (err) console.error(err);
  fs.readFile('b.txt', function (err, dataB) {
    if (err) console.error(err);
    fs.readFile('c.txt', function (err, dataC) {
      if (err) console.error(err);
      setTimeout(function () {
        fs.writeFile('d.txt', dataA + dataB + dataC, function (err) {
          if (err) console.error(err);
        });
      }, 60 * 1000);
    });
  });
});

連続した大気は,コールバック関数を重畳中に繰り返し重畳させ,非常に複雑になる.このように、括弧のコールバックhellが発生すると、必要に応じてコールバックを呼び出すことが困難になる.そこで,これを解決するためにPromiseを導入した.

エラー優先コールバック

コールバックを使用すると、予期せぬエラーが発生することもあります.そのため、エラーを処理する基準が必要で、まずエラーコールバックが発生しました.

function loadScript(src, callback){
  let script = document.createElement('script');
  script.src = src;
  
  script.onload = () => callback(null, script);
  script.onerror = () => callback(new Error(`${src}를 읽지 못함`));
  
  document.head.append(script);
}

loadScript('/my/script.js', function(error, script) {
  if (error) {
    // 에러 처리
  } else {
    // 스크립트 로딩이 성공적으로 끝남
  }
});

上記の例では、jsファイルを取得し、スクリプトラベルを作成し、srcプロパティを指定します.
コールバックの最初のパラメータがエラーに設定されています.エラーが発生した場合はcallback(new error()を使用して呼び出します.2番目のパラメータは、エラーを回避するために実行されるコンテキストに適用されます.エラーがnullまたはundefinedの場合、エラーはありません.必要な操作が成功した場合、コールバック(null、result 1、results 2...)呼び出されて...
リファレンス
1)JavaScript(光メディア)の学習
2) https://ko.javascript.info/callbacks