> 웹 프론트엔드 > JS 튜토리얼 > jQuery에서 콜백 함수를 사용자 정의하는 방법

jQuery에서 콜백 함수를 사용자 정의하는 방법

伊谢尔伦
풀어 주다: 2017-06-16 14:59:59
원래의
2280명이 탐색했습니다.

먼저 "콜백"을 콜백의 문자 그대로 번역하면 이것이 함수가 호출되는 메커니즘이라고 이해할 수 있습니다.

명사를 만나면 먼저 바이두나 구글에서 검색해 볼 수 있습니다. 공식 설명은

다음은 Wikipedia의 콜백에 대한 정의입니다. :

콜백은 편리한 시점에 인수를 콜백(실행)할 것으로 예상되는 다른 코드에 인수로 전달되는 실행 코드 조각입니다. time

어려운 번역: 콜백 함수가 다른 함수의 인수로 사용됩니다. 실행 가능한 코드 세그먼트입니다. 이 코드 세그먼트는 편리한 시간에 실행됩니다.

인기 있는 설명: 함수 f2를 함수 f1에 매개 변수로 전달하고 해당 시점에서 f2를 실행합니다. f1의 적절한 시간(저는 f1 아래의 모든 예를 사용합니다. f2는 의미합니다)

그래서 우리는 다음과 같은 콜백 함수 패턴을 얻을 수 있습니다

function f1(f2) {    //f1要执行的一些代码
    if (f2 && typeof(f2) === "function") { //对f2做判断是否存在并且是一个函数        f2();
    }
}
로그인 후 복사

여기서 두 매개변수의 f2는 함수 f2에 대한 포인터라는 점에 유의해야 합니다. 그래서 f2 뒤에 괄호를 추가할 수 없습니다

그리고 f1 안에 f2 이때 f2를 호출하여 실행해야 하기 때문에 뒤에 괄호가 있어야 하므로 f2()를 작성해야 합니다

이 모드를 인스턴스화하여 실행 결과를 확인하겠습니다.

声明函数function f1(f2) {
alert("我是f1");if (f2 && typeof(f2) === "function") { //写上判断是个好习惯f2()
}
}
执行
f1(function() {
alert("我是f2");
})
结果://"我是f1",“我是f2”
로그인 후 복사

전체 함수 실행 과정을 살펴보겠습니다. f1(function( ){alert("I am f2");})을 호출할 때

먼저 f1()에 익명 함수를 전달하는데, 이 익명 함수는 선언된 함수의 f2 매개변수는 위에서 아래로 실행됩니다. , f1 자체의 실행 흐름에 영향을 주지 않고 실행하고 싶을 때 콜백이 실행되도록 할 수 있습니다

하지만 캡슐화와 아름다움을 위해 우리 대부분은 이렇게 작성합니다

function f1(f2) {    alert("我是f1");    if (f2 && typeof(f2) === "function") {  
        f2()
    }    alert("我又是f1 哈哈");
}
执行
f1(function(){
    alert("我是f2");
})//结果:我是f1 ,我是f2,我又是1 哈哈
로그인 후 복사

사실 콜백은 함수는 그렇게 복잡하지 않습니다. js에서는 함수를 일반 매개변수로 취급할 수 있습니다. 뒤에 ()를 추가하면 이 함수를 호출한다는 의미입니다.

아래 예를 보세요

function f1(f2){ 
if (f2 && typeof(f2) === "function") {  
settimeOut(function(){f2()},1000) ;//f1执行1s后f2执行}
}function f2(){/**/}
f1(f2);
로그인 후 복사

위의 예에서도 사실 함수가 정의될 ​​때마다 해당 함수가 컨테이너의 스택에 추가되고, 인덱스가 함수 이름이라는 것을 알 수 있습니다. 기본값은 under window이므로 거기에 문자열을 던질 수 있고, window 아래 문자열을 통해서도 이 콜백 함수를 호출할 수 있습니다.

매개변수가 있는 경우 위의 방법을 사용할 수 있습니다.

예를 들어 jQuery

$(function(){
    function funcname(param){
        //do something
         
        //callback
        param.callback();    
    }
 
    //调用
    funcname({
        callback:function(){
            alert('callback do'); 
        }   
    });      
});
로그인 후 복사

#div를 빠르게 숨겼다가 점차적으로 #div2를 표시하는 예가 있습니다. jQuery에는 수많은 콜백 함수가 있습니다

그리고 콜백을 관리하는 전용 메소드가 있습니다

$("#div1").fadeOut("fast",functin(){
    $("#div2").fadeIn("slow");
})
로그인 후 복사

마지막으로 저는 say 최근에 프로젝트에서 사용한 콜백을 살펴보겠습니다

하이브리드 앱의 기능은 아마도 ios에 요청을 보내고 ios가 json 데이터를 나에게 반환한 다음 반환된 데이터를 구문 분석하여 웹페이지

jQuery.Callbacks = function( options ) {...}
로그인 후 복사

위 내용은 jQuery에서 콜백 함수를 사용자 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿