Implémentation et utilisation de base de jQuery Callback

Dans le développement js, comme il n'y a pas de multi-threading, on rencontre souvent la notion de callback Par exemple, enregistrer une fonction de rappel dans la fonction ready, enregistrer le traitement événementiel des éléments, etc. Dans des scénarios plus complexes, lorsqu'un événement se produit, plusieurs méthodes de rappel peuvent devoir être exécutées en même temps. L'implémentation qui peut être directement envisagée consiste à implémenter une file d'attente et à ajouter toutes les fonctions nécessitant des rappels lorsque l'événement est déclenché dans cette file d'attente. pour le stockage Lorsque l'événement est déclenché, les fonctions enregistrées sont séquentiellement récupérées de cette file d'attente et exécutées.

Aperçu

Abréviation de $(document).ready().

permet de lier une fonction à exécuter après le chargement du document DOM. Cette fonction fonctionne de la même manière que $(document).ready(), sauf que lorsque vous utilisez cette fonction, vous devez envelopper tous les opérateurs $() dans la page qui doivent être exécutés lorsque le DOM est chargé. Techniquement, cette fonction peut être chaînée – mais peu de cas sont réellement liés de cette manière. Vous pouvez utiliser n'importe quel nombre d'événements $(document).ready sur une page. Voir ready(Function) pour plus d’informations sur l’événement ready.

Paramètres

callbackFunctionV1.0

La fonction à exécuter lors du chargement du DOM

peut être implémentée simplement comme suit .

Tout d’abord, implémentez une fonction de classe pour représenter cette classe de rappel. En javascript, utilisez un tableau pour représenter cette file d'attente.

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

Ensuite, implémentez les méthodes dans la classe à travers le prototype. Les fonctions ajoutées et supprimées sont stockées dans le tableau. Lors du déclenchement, vous pouvez fournir des paramètres qui seront transmis à chaque fonction de rappel.

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

Le code de test est le suivant :

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

Ou, n'utilisez pas de prototypes et implémentez-les directement via des fermetures.

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

Dans ce cas, l'exemple de code doit également être ajusté. Nous pouvons simplement utiliser directement la fonction 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");

Continuons avec la deuxième méthode.

Pour les scénarios plus complexes, nous ne devons tirer qu'une seule fois. Même si le feu est appelé dans le futur, il ne prendra plus effet.

Par exemple, cela peut devenir comme ça lors de la création d'un objet. L'utilisation d'une fois ici signifie qu'il ne peut tirer qu'une seule fois.

var callbacks = Callbacks("once");

Ensuite, notre code doit également être ajusté. En fait, c'est très simple. Si une fois est défini, alors après le tir, tuez simplement la file d'attente d'origine directement.

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

Dans jQuery, non seulement une fois est fournie, mais quatre types de méthodes différents sont fournis :

une fois : ne peut être déclenché qu'une seule fois.

mémoire : Lorsque la file d'attente aura été déclenchée, la fonction ajoutée sera appelée directement sans se déclencher à nouveau.

unique : unicité de la fonction garantie

stopOnFalse : Tant qu'un rappel renvoie false, les appels suivants seront interrompus.

Ces quatre méthodes peuvent être combinées, utilisez simplement des espaces pour les séparer dans le constructeur, comme $.Callbacks("once memory unique");

La documentation officielle fournit quelques méthodes d'utilisation Exemple .

callbacks.add(fn1, [fn2, fn3,...])//Ajouter un/plusieurs rappels
callbacks.remove(fn1, [fn2, fn3,...])/ / Supprimez un/plusieurs rappels
callbacks.fire(args)//Rappel de déclenchement, transmettez les arguments à fn1/fn2/fn3...
callbacks.fireWith(context, args)//Spécifiez le contexte contextuel, puis déclenchez le rappel
callbacks.lock()//Verrouillez l'état de déclenchement actuel de la file d'attente
callbacks.disable()//Désactivez le gestionnaire, c'est-à-dire que tous les incendies ne prendront pas effet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!