JavaScript 콜백

"I will call back later!"

콜백 (callback)은 다른 함수에 전달된 함수입니다

이 기술은 함수가 다른 함수를 호출할 수 있게 합니다

콜백 함수는 다른 함수가 완료된 후에 실행될 수 있습니다

함수 시퀀스

JavaScript 함수는 정의된 순서대로 대신 호출된 순서로 실행됩니다。

이 예제는 마지막으로 "Goodbye"을 표시합니다:

예제

function myFirst() {
  myDisplayer("Hello");
}
function mySecond() {
  myDisplayer("Goodbye");
}
myFirst();
mySecond();

직접 시도해 보세요

이 예제는 마지막으로 "Hello"을 표시합니다:

예제

function myFirst() {
  myDisplayer("Hello");
}
function mySecond() {
  myDisplayer("Goodbye");
}
mySecond();
myFirst();

직접 시도해 보세요

순서 제어

때로는 함수가 언제 실행되기를 원할 때 더 잘 제어하고 싶습니다。

계산을 수행하고 결과를 표시하려고 합니다.

계산기 함수를 호출할 수 있습니다 (myCalculator) 결과를 저장한 후 다른 함수를 호출합니다 (myDisplayer)를 통해 결과를 표시합니다:

예제

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
  let sum = num1 + num2;
  return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);

직접 시도해 보세요

또는, 계산기 함수를 호출할 수 있습니다 (myCalculator),계산기 함수가 표시 함수를 호출하도록 합니다 (myDisplayer):

예제

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
  let sum = num1 + num2;
  myDisplayer(sum);
}
myCalculator(5, 5);

직접 시도해 보세요

위의 첫 번째 예제의 문제는 결과를 표시하기 위해 두 개의 함수를 호출해야 한다는 것입니다。

두 번째 예제의 문제는 계산기 함수가 결과를 표시하는 것을 방지할 수 없다는 것입니다。

이제 콜백을 도입할 때입니다。

JavaScript 콜백

콜백은 다른 함수에 전달된 함수입니다。

콜백을 사용하여 콜백을 통해 계산기 함수를 호출할 수 있습니다(myCalculator),계산이 완료되면 계산기 함수를 실행하도록 합니다:

예제

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

직접 시도해 보세요

위의 예제에서 myDisplayer 함수 이름입니다.

그것은 매개변수로 전달됩니다. myCalculator()

함수를 매개변수로 전달할 때 괄호를 사용하지 마세요.

코드: myCalculator(5, 5, myDisplayer);

에러: myCalculator(5, 5, myDisplayer());

何时使用回调?

위의 예제는 매우 흥미롭지 않습니다.

回调의 문법을 설명하기 위해 간소화했습니다.

回调의 진정한 빛나는 부분은 비동기 함수로, 하나의 함수가 다른 함수를 기다리는 경우(예: 파일 로드를 기다리는 경우)입니다.

다음 장에서 비동기 함수를 소개할 것입니다.