자바스크립트 콜백 함수 정의 및 사용 예에 ​​대한 자세한 설명

콜백 함수는 함수 포인터를 통해 호출되는 함수입니다. 함수 포인터(주소)를 다른 함수에 매개변수로 전달하고 이 포인터가 가리키는 함수를 호출하는 데 사용되는 경우 이를 콜백 함수라고 합니다. 콜백 함수는 함수 구현자가 직접 호출하는 것이 아니라 특정 이벤트나 조건이 발생했을 때 상대방이 해당 이벤트나 조건에 대응하기 위해 호출하는 함수이다.

JavaScript에서 콜백 함수의 구체적인 정의는 다음과 같습니다. 함수 A는 매개변수(함수 참조)로 다른 함수 B에 전달되고 이 함수 B는 함수 A를 실행합니다. 함수 A가 콜백 함수라고 가정해 보겠습니다. 이름(함수 표현식)이 없으면 익명 콜백 함수라고 합니다. 따라서 콜백은 비동기식 사용에 반드시 사용되는 것은 아닙니다. 콜백은 특정 작업을 수행한 후 콜백 함수를 실행해야 하는 것과 같은 일반적인 동기(차단) 시나리오에서 자주 사용됩니다.

Example
동기화(블로킹)에서 콜백을 사용하는 예는 func1 코드 실행이 완료된 후 func2를 실행하는 것이 목적입니다.

var func1=function(callback){
    //do something.
    (callback && typeof(callback) === "function") && callback();
}
func1(func2);
    var func2=function(){
}

콜백 함수 사용 사례
리소스 로딩: js 파일을 동적으로 로딩한 후 콜백 실행, iframe 로딩 후 콜백 실행, ajax 연산 콜백, 이미지 로딩 완료 후 콜백 실행, AJAX 등

DOM 이벤트와 Node.js 이벤트는 콜백 메커니즘을 기반으로 합니다(Node.js 콜백은 다중 레이어 콜백 중첩에 문제가 있을 수 있습니다).
setTimeout의 지연 시간은 0입니다. 이 해킹은 실제로 settimeout에 의해 호출되는 함수가 콜백의 구현입니다.

체인 호출: 체인 호출 시 할당자(setter) 메서드에서 (또는 반환하지 않습니다.) 자체) (값 메서드에서) 체인 호출을 구현하기는 쉽지만 값 게터(getter)는 원하는 경우 이 포인터 대신 필요한 데이터를 반환하는 평가자가 필요하기 때문에 체인 호출을 구현하기가 상대적으로 어렵습니다. 연결된 메서드를 구현하려면 콜백 함수를 사용하여

setTimeout 및 setInterval 함수 호출을 구현하여 반환 값을 얻을 수 있습니다. 두 함수 모두 비동기식이므로, 즉 호출 순서가 프로그램의 기본 프로세스와 상대적으로 독립적이므로 본문에서 반환 값을 기다릴 방법이 없으며 프로그램은 반환 값이 반환될 때 중지하고 기다리지 않습니다. 그렇지 않으면 setTimeout과 setInterval의 의미가 없어지므로 return을 사용해도 의미가 없으며 콜백만 사용할 수 있습니다. 콜백의 의미는 적시에 처리할 수 있도록 타이머 실행 결과를 에이전트 기능에 알리는 것입니다.

함수도 객체입니다

콜백 함수를 이해하려면 먼저 함수의 규칙을 명확히 이해해야 합니다. JavaScript에서 함수는 이상하지만 실제로는 객체입니다. 정확하게 말하면 함수는 Function() 생성자를 사용하여 생성된 Function 개체입니다. Function 개체에는 함수의 JavaScript 코드가 포함된 문자열이 포함되어 있습니다. C나 Java에서 왔다면 이상하게 보일 수 있습니다. 코드가 어떻게 문자열일 수 있습니까? 하지만 자바스크립트에서는 이런 일이 흔합니다. 데이터와 코드의 구분이 모호합니다.

//可以这样创建函数
var fn = new Function("arg1", "arg2", "return arg1 * arg2;");
fn(2, 3);   //6

이렇게 하면 코드를 다른 함수에 전달할 수도 있고, 일반 변수나 객체를 전달할 수도 있다는 장점이 있습니다(코드는 말 그대로 객체일 뿐이기 때문입니다).

　함수를 콜백으로 전달하기

　 함수를 매개변수로 전달하는 것은 쉽습니다.

function fn(arg1, arg2, callback){
    var num = Math.ceil(Math.random() * (arg1 - arg2) + arg2);
    callback(num);//传递结果
}
fn(10, 20, function(num){
   console.log("Callback called! Num: " + num); 
});//结果为10和20之间的随机数

어쩌면 이것은 번거롭고 심지어 약간 어리석게 보일 수도 있습니다. 결과를 정상적으로 반환하는 것은 어떨까요? 하지만 콜백 함수를 사용해야 한다면 그렇게 생각하지 않을 수도 있습니다!

기존 함수는 매개변수 형식으로 데이터를 입력하고 반환문을 사용하여 값을 반환합니다. 이론적으로 함수의 끝에 return 문이 있는데 구조적으로는 입력 지점과 출력 지점입니다. 이는 이해하기 더 쉽습니다. 함수는 기본적으로 입력과 출력 간의 구현 프로세스를 매핑한 것입니다.

　그런데 함수 구현 과정이 매우 길면 함수 처리가 완료될 때까지 기다리는 것을 선택합니까, 아니면 비동기 처리를 위해 콜백 함수를 사용하는 것을 선택합니까? 이 경우 AJAX 요청과 같은 콜백 함수를 사용하는 것이 중요합니다. 처리를 위해 콜백 함수를 사용하면 코드는 헛되이 기다리지 않고 다른 작업을 계속 수행할 수 있습니다. 실제 개발에서는 JavaScript에서 비동기 호출이 자주 사용되며 여기서는 적극 권장됩니다!

　 다음은 AJAX를 사용하여 XML 파일을 로드하고 call() 함수를 사용하여 요청된 객체의 컨텍스트에서 콜백 함수를 호출하는 보다 포괄적인 예입니다.

function fn(url, callback){
    var httpRequest;　　　　//创建XHR
    httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() :　　　
　　　　    window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP"             ) : undefined;//针对IE进行功能性检测
    
    httpRequest.onreadystatechange = function(){
      if(httpRequest.readystate === 4 
                && httpRequest.status === 200){　　//状态判断
          callback.call(httpRequest.responseXML);  
       }
    };
    httpRequest.open("GET", url);
    httpRequest.send();
}
fn("text.xml", function(){　　　　//调用函数
   console.log(this); 　　//此语句后输出
});
console.log("this will run before the above callback.");　　//此语句先输出

　 비동기 처리를 요청합니다. 즉, 요청을 시작할 때 완료되면 함수를 호출하라고 지시합니다. 실제 상황에서 onreadystatechange 이벤트 핸들러는 요청 실패 상황도 고려해야 합니다. 여기서는 xml 파일이 존재하고 브라우저에서 성공적으로 로드될 수 있다고 가정합니다. 이 예에서는 비동기 함수가 onreadystatechange 이벤트에 할당되므로 즉시 실행되지 않습니다.

　마지막으로 두 번째 console.log 문이 먼저 실행되는 이유는 요청이 완료될 때까지 콜백 함수가 실행되지 않기 때문입니다.

　위의 예는 이해하기 쉽지 않습니다. 다음 예를 살펴보세요.

function foo(){
    var a = 10;
    return function(){
        a *= 2;
        return a;       
    };   
}
var f = foo();
f(); //return 20.
f(); //return 40.

　　函数在外部调用，依然可以访问变量a。这都是因为javascript中的作用域是词法性的。函数式运行在定义它们的作用域中（上述例子中的foo内部的作用域），而不是运行此函数的作用域中。只要f被定义在foo中，它就可以访问foo中定义的所有的变量，即便是foo的执行已经结束。因为它的作用域会被保存下来，但也只有返回的那个函数才可以访问这个保存下来的作用域。返回一个内嵌匿名函数是创建闭包最常用的手段。

위 내용은 자바스크립트 콜백 함수 정의 및 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!