자바스크립트 콜백 함수 이해_기본지식

함수를 다른 함수에 매개변수로 전달합니다. 이 함수가 소위 콜백 함수입니다

프로젝트의 A 레이어와 B 레이어가 서로 다른 사람들에 의해 완성되는 상황이 종종 발생합니다. A 레이어는 funA 기능을 담당하고, B 레이어는 funcB를 담당합니다. 레이어 B가 특정 모듈의 데이터를 사용하려고 하면 레이어 A의 사람들에게 특정 요구 사항을 충족하는 데이터를 제공하고 인터페이스를 제공해야 한다고 말합니다.

A레벨 담당자는 "데이터를 제공할 테니 어떻게 표시하고 처리할지는 B가 할 일"이라고 말했다.
물론, 레이어 B는 모든 요구에 맞는 데이터 인터페이스를 제공할 수 없습니다. B는 A가 통과할 수 있는 인터페이스를 제공하고 B는 이를 표시하는 함수를 작성합니다.

즉, 다른 사람과 협력해야 하고, 다른 사람이 데이터를 제공해야 하며, 다른 사람이 어떻게 데이터를 얻거나 구성하는지 신경 쓸 필요가 없습니다. 획득한 데이터를 조작하기만 하면 됩니다. 이때 콜백 기능을 이용해야 합니다

따라서 콜백은 본질적으로 디자인 패턴이며 jQuery(다른 프레임워크 포함)의 디자인 원칙은 이 패턴을 따릅니다.

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

코드 복사 코드는 다음과 같습니다.

var func1=함수(콜백){
//뭔가를 하세요.
(콜백 && typeof(callback) === "함수") && callback();
}

func1(func2);
var func2=함수(){
}

비동기 콜백의 예:

코드 복사 코드는 다음과 같습니다.

$(문서).ready(콜백);

$.ajax({
​​​ URL: "test.html",
컨텍스트: document.body
}).done(함수() {
          $(this).addClass("done");
}).fail(함수() {
경고("오류");
}).always(function() {
경고("완료")
});

Ajax 요청은 실제로 비동기식이지만 이 요청은 요청 상태가 변경될 때 콜백이 이전에 설정된 경우 브라우저에서 상태 변경을 생성합니다. 이벤트를 처리하고 JavaScript 엔진의 처리 대기열에서 처리를 기다리는 중입니다. 참조: http://www.phpv.net/html/1700.html

콜백은 언제 실행되나요?

콜백 함수는 일반적으로 동기 상황에서는 가장 마지막에 실행되지만, 비동기 상황에서는 이벤트가 발생하지 않거나 조건이 충족되지 않아 실행되지 않을 수 있습니다.

콜백 기능 사용 사례

리소스 로딩: js 파일을 동적으로 로딩한 후 콜백 실행, iframe 로딩 후 콜백 실행, ajax 연산 콜백, 이미지 로딩 완료 후 콜백 실행, AJAX 등
DOM 이벤트와 Node.js 이벤트는 콜백 메커니즘을 기반으로 합니다(Node.js 콜백에는 다중 레이어 콜백 중첩 문제가 있을 수 있음).
setTimeout의 지연 시간은 0입니다. 이 핵은 종종 사용됩니다. settimeout에 의해 호출되는 함수는 실제로 콜백의 구현입니다

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

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

온라인으로 정보를 수집하면 제가 직접 예를 정리할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 fun(num,callback){
If(숫자<0) {
Alert("처리를 위해 레이어 A 함수를 호출합니다!");
Alert("데이터는 음수일 수 없습니다. 입력 오류입니다!"); }else if(num==0){
Alert("처리를 위해 레이어 A 함수를 호출합니다!");
Alert("이 데이터 항목은 존재하지 않습니다!");
}그밖에{
Alert("B 계층 함수 호출 처리!");
         콜백(1);
}
}
함수 테스트(){
var num=document.getElementById("score").value;
Fun(num,function(back){ //익명 B 레이어 처리 함수
경고(":" 뒤로);
If(num<2)
Alert("숫자는 1입니다.");
          else if(num<=3)
Alert("숫자는 2 또는 3입니다!");
        그 외
Alert("3보다 큰 숫자입니다!"); })
}

함수가 fun을 실행하기 시작하면 먼저 num이 음수인지 0인지 확인하기 위해 실행되고, 그렇지 않으면 B 계층 처리 함수를 실행하여 1을 출력하고 <2로 결정합니다. <= 3, >3 및 기타 상황.

체험 팁:

콜백이 존재하고 함수 참조 또는 함수 표현식이어야 하는지 확인하는 것이 가장 좋습니다.

코드 복사 코드는 다음과 같습니다.

(콜백 && typeof(callback) === "함수") && callback();

코드 복사 코드는 다음과 같습니다.

var obj={

초기화: 함수(콜백){
              //할 일...
If(콜백 && typeof(callback) === "함수") && 콜백()){
                콜백('init...');//콜백
}
}

마지막으로 콜백 함수를 사용해야 하는 이유는 무엇입니까? 다음 비유는 매우 생생하고 흥미롭습니다.

할 일이 있으면 옆집 기숙사에 가서 찾아보는데 반 친구들이 없는 것을 발견하면 어떻게 해야 할까요?

방법 1, 몇 분 간격으로 옆집 기숙사에 가서 누가 있는지 확인

방법 2, 같은 숙소에 있는 사람들에게 그가 돌아오면 전화해달라고 부탁하세요

전자는 폴링이고 후자는 콜백입니다.

그럼 반 친구들이 돌아올 때까지 옆 기숙사에서 기다리면 될까요?

그렇습니다. 다른 일을 할 시간을 절약할 수 있었는데 이제는 기다리느라 시간을 낭비해야 합니다. 원래의 비차단 비동기 호출을 차단 동기 호출로 전환합니다.

JavaScript 콜백은 비동기 호출 시나리오에서 사용되며 폴링보다 콜백 사용 성능이 더 좋습니다.