jQuery コールバックの基本的な実装と使用法

JS開発ではマルチスレッドがないため、ready関数にコールバック関数を登録したり、要素のイベント処理を登録したりするなど、コールバックの概念がよく出てきます。より複雑なシナリオでは、イベントの発生時に複数のコールバック メソッドを同時に実行する必要がある場合があります。直接考慮できる実装は、キューを実装し、イベントがトリガーされたときにコールバックを必要とするすべての関数をこのキューに追加することです。イベントがトリガーされると、保存された関数がこのキューから順番に取得され、実行されます。

概要

$(document).ready()の略称。

DOM ドキュメントのロード後に実行される関数をバインドできます。この関数は、$(document).ready() と同じように機能します。ただし、この関数を使用する場合、DOM のロード時に実行する必要があるすべての $() 演算子をページ内でラップする必要がある点が異なります。技術的には、この関数は連鎖可能ですが、実際にこの方法でリンクするケースは多くありません。 ページ上で任意の数の $(document).ready イベントを使用できます。 Ready イベントの詳細については、ready(Function) を参照してください。

Parameters

callbackFunctionV1.0

DOMロード時に実行される関数

は以下のように簡単に実装できます。

まず、このコールバック クラスを表すクラス関数を実装します。 JavaScript では、配列を使用してこのキューを表します。

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

引き続き 2 番目の方法を使用してみましょう。

より複雑なシナリオの場合は、一度だけ起動する必要があります。その後、ファイアが呼び出されても、有効になりません。

例えばオブジェクトを作成するとこんな感じになるかもしれません。ここでの Once の使用は、1 回しか発火できないことを意味します。

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 メソッドを提供するだけでなく、4 つの異なるタイプのメソッドを提供します:

once: 1 回だけトリガーできます。

memory: キューがトリガーされると、追加された関数は再度トリガーされることなく直接呼び出されます。

unique: 保証された関数の一意性

stopOnFalse: 1 つのコールバックが false を返す限り、後続の呼び出しは中断されます。

これら 4 つのメソッドは組み合わせることができます。$.Callbacks("once Memory unique"); のように、スペースを使用してコンストラクターに区切るだけです。

公式ドキュメントには使用例がいくつか記載されています。

callbacks.add(fn1, [fn2, fn3,...])//1 つまたは複数のコールバックを追加します
callbacks.remove(fn1, [fn2, fn3,...])//1 つまたは複数のコールバックを削除します
callbacks.fire(args)//コールバックをトリガーし、引数を fn1/fn2/fn3...に渡します
callbacks.fireWith(context, args)//コンテキスト context を指定してコールバックをトリガーします
callbacks.lock()// ロックキューの現在のトリガーステータス
callbacks.disable()//マネージャーを無効にします。つまり、すべての起動は有効になりません

以上がjQuery コールバックの基本的な実装と使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。