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());
何时使用回调?
위의 예제는 매우 흥미롭지 않습니다.
回调의 문법을 설명하기 위해 간소화했습니다.
回调의 진정한 빛나는 부분은 비동기 함수로, 하나의 함수가 다른 함수를 기다리는 경우(예: 파일 로드를 기다리는 경우)입니다.
다음 장에서 비동기 함수를 소개할 것입니다.