jQuery 콜백의 기본 구현 및 사용법

JS 개발에서는 멀티스레딩이 없기 때문에 콜백이라는 개념을 자주 접하게 되는데, 예를 들어 Ready 함수에 콜백 함수를 등록하는 것, 요소의 이벤트 처리를 등록하는 것 등이 있습니다. 보다 복잡한 시나리오에서는 이벤트가 발생할 때 여러 콜백 메서드를 동시에 실행해야 할 수도 있습니다. 직접적으로 고려할 수 있는 구현은 이벤트가 트리거될 때 콜백이 필요한 모든 함수를 이 큐에 추가하는 것입니다. 이벤트가 트리거되면 저장된 기능이 이 큐에서 순차적으로 검색되어 실행됩니다.

개요

$(document).ready()의 약어입니다.

DOM 문서가 로드된 후 실행될 함수를 바인딩할 수 있습니다. 이 함수는 $(document).ready()와 동일하게 작동합니다. 단, 이 함수를 사용할 때 DOM이 로드될 때 실행되어야 하는 페이지의 모든 $() 연산자를 래핑해야 합니다. 기술적으로 이 함수는 연결 가능하지만 실제로 이런 방식으로 연결되는 경우는 많지 않습니다. 페이지에서 $(document).ready 이벤트를 원하는 만큼 사용할 수 있습니다. Ready 이벤트에 대한 자세한 내용은 Ready(Function)을 참조하세요.

Parameters

callbackFunctionV1.0

DOM이 로드될 때 실행되는 함수

는 다음과 같이 간단하게 구현할 수 있습니다.

먼저 이 콜백 클래스를 나타내는 클래스 함수를 구현합니다. 자바스크립트에서는 배열을 사용하여 이 대기열을 나타냅니다.

function Callbacks() {    this.list = [];
}

그런 다음 프로토타입을 통해 클래스의 메서드를 구현합니다. 추가 및 삭제된 함수는 실행 시 각 콜백 함수에 전달될 매개변수를 제공할 수 있습니다.

Callbacks.prototype = {
    add: function(fn) {
        this.list.push(fn);
    },
    remove: function(fn){
        var position = this.list.indexOf(fn);
        if( position >=0){
            this.list.splice(position, 1);
        }
    },
    fire: function(args){
        for(var i=0; i<this.list.length; i++){
            var fn = this.list[i];
            fn(args);
        }
    }
};

테스트 코드는 다음과 같습니다.

function fn1(args){
    console.log("fn1: " + args);
}
function fn2(args){
    console.log("fn2: " + args);
}
var callbacks = new Callbacks();
callbacks.add(fn1);
callbacks.fire("Alice");
callbacks.add(fn2);
callbacks.fire("Tom");
callbacks.remove(fn1);
callbacks.fire("Grace");

또는 프로토타입을 사용하지 말고 클로저를 통해 직접 구현해 보세요.

function Callbacks() {
    
    var list = [];
    
    return {
         add: function(fn) {
            list.push(fn);
        },
        
        remove: function(fn){
            var position = list.indexOf(fn);
            if( position >=0){
                list.splice(position, 1);
            }
        },
        
        fire: function(args) {
            for(var i=0; i<list.length; i++){
                var fn = list[i];
                fn(args);
            }    
        }
    };
}

이 경우 샘플 코드도 조정해야 합니다. Callbacks 함수를 직접 사용할 수 있습니다.

function fn1(args){
    console.log("fn1: " + args);
}
function fn2(args){
    console.log("fn2: " + args);
}
var callbacks = Callbacks();
callbacks.add(fn1);
callbacks.fire("Alice");
callbacks.add(fn2);
callbacks.fire("Tom");
callbacks.remove(fn1);
callbacks.fire("Grace");

계속해서 두 번째 방법을 사용해 보겠습니다.

더 복잡한 시나리오에서는 한 번만 발사하면 됩니다. 나중에 화재가 발생하더라도 더 이상 효과가 발생하지 않습니다.

예를 들어 객체를 만들면 이렇게 될 수도 있습니다. 여기서 한 번 사용한다는 것은 한 번만 발사할 수 있다는 의미입니다.

var callbacks = Callbacks("once");

그런 다음 코드도 조정해야 합니다. 실제로 한 번 설정하면 실행 후 원래 대기열을 직접 종료하면 됩니다.

function Callbacks(options) {
    var once = options === "once";
    var list = [];
    
    return {
         add: function(fn) {
            if(list){
                list.push(fn);
            }
        },
        
        remove: function(fn){
            if(list){
                var position = list.indexOf(fn);
                if( position >=0){
                    list.splice(position, 1);
                }
            }
        },
        
        fire: function(args) {
            if(list)
            {
                for(var i=0; i<list.length; i++){
                    var fn = list[i];
                    fn(args);
                }
            }
            if( once ){
                list = undefined;
            }
        }
    };
}

jQuery는 한 번만 메서드를 제공할 뿐만 아니라 네 가지 유형의 메서드를 제공합니다.

once: 한 번만 트리거할 수 있습니다.

메모리: 대기열이 트리거되면 추가된 함수가 다시 트리거되지 않고 직접 호출됩니다.

unique: 함수 고유성 보장

stopOnFalse: 하나의 콜백이 false를 반환하는 한 후속 호출은 중단됩니다.

이 네 가지 방법을 결합할 수 있습니다. $.Callbacks("once memory Unique");

공식 문서에서는 몇 가지 사용 예를 제공합니다.

callbacks.add(fn1, [fn2, fn3,...])//하나 이상의 콜백 추가
callbacks.remove(fn1, [fn2, fn3,...])//하나 이상의 콜백 제거
callbacks.fire(args)//콜백 트리거, fn1/fn2/fn3에 args 전달...
callbacks.fireWith(context, args)//컨텍스트 컨텍스트 지정 및 콜백 트리거
callbacks.lock()// 잠금 대기열의 현재 트리거 상태
callbacks.disable()//관리자를 비활성화합니다. 즉, 모든 화재가 적용되지 않습니다

위 내용은 jQuery 콜백의 기본 구현 및 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!