Basic implementation and usage of jQuery Callback

In js development, since there is no multi-threading, we often encounter the concept of callback. For example, registering a callback function in the ready function, registering event processing of elements, etc. In more complex scenarios, when an event occurs, multiple callback methods may need to be executed at the same time. The implementation that can be directly considered is to implement a queue and add all functions that require callbacks when the event is triggered to this queue for storage. When the event is triggered, the saved functions are sequentially retrieved from this queue and executed.

Overview

$(document).ready() abbreviation.

Allows you to bind a function to be executed after the DOM document is loaded. This function works the same as $(document).ready(), except that when using this function, you need to wrap all the $() operators in the page that need to be executed when the DOM is loaded. Technically, this function is chainable - but not many cases actually link in this way. You can use any number of $(document).ready events on a page. See ready(Function) for more information on the ready event.

Parameters

callbackFunctionV1.0

The function to be executed when the DOM is loaded

can be implemented simply as follows.

First, implement a class function to represent this callback class. In javascript, use an array to represent this queue.

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

Then, implement the methods in the class through the prototype. The added and deleted functions are stored in the array. When firing, you can provide parameters, which will be passed to each callback function.

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);
        }
    }
};

The test code is as follows:

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");

Or, do not use prototypes and implement them directly through closures.

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);
            }    
        }
    };
}

In this case, the sample code also needs to be adjusted. We can just use the Callbacks function directly.

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");

Let’s continue using the second method.

For more complex scenarios, we need to fire only once. Even if fire is called in the future, it will no longer take effect.

For example, it may be in this form when creating an object. The use of once here means that it can only fire once.

var callbacks = Callbacks("once");

Then, our code also needs to be adjusted. In fact, it is very simple. If once is set, then after fire, just kill the original queue directly.

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 not only provides once method, but provides four types of different methods:

once: can only be triggered once.

memory: When the queue has been triggered, the function added will be called directly without triggering again.

unique: Guarantee the uniqueness of the function

stopOnFalse: As long as one callback returns false, subsequent calls will be interrupted.

These four methods can be combined, just use spaces to separate them into the constructor, such as $.Callbacks("once memory unique");

The official documentation provides some methods for use Example.

callbacks.add(fn1, [fn2, fn3,...])//Add one/multiple callbacks
callbacks.remove(fn1, [fn2, fn3,...])/ /Remove one/multiple callbacks
callbacks.fire(args)//Trigger callback, pass args to fn1/fn2/fn3...
callbacks.fireWith(context, args)//Specify context context and then Trigger callback
callbacks.lock()//Lock the current triggering status of the queue
callbacks.disable()//Disable the manager, that is, all fires will not take effect

The above is the detailed content of Basic implementation and usage of jQuery Callback. For more information, please follow other related articles on the PHP Chinese website!