ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery でコールバックを使用する意味は何ですか?

jQuery でコールバックを使用する意味は何ですか?

伊谢尔伦
伊谢尔伦オリジナル
2017-06-16 14:43:541124ブラウズ

Callbacks は jQuery 1.7 で導入されたメソッドで、同じメソッド パラメーターを持つコールバック関数のグループを管理するために使用されます。配列などのコールバックの追加、削除、クリアに加えて、コールバックにはいくつかの特別なモードも用意されています。モードが異なると、コールバック関数のライフサイクルと実行順序が若干異なります。

コールバック列の生成 (コールバック)

var callbacks = $.Callbacks(flags);

パラメーター falgs は、コールバックのモードを示すために使用される文字列です。たとえば、「once stopOnFalse」モードでは、コールバックは最大 1 回だけ実行されます。実行中に false を返すと、コールバック列の実行も中断されます。

それでは、jQuery.Callbacks の使用シナリオはどこにあるのでしょうか?

多くの場合、一連の関数の逐次実行を制御する必要があります。この問題を処理するには、一般にキュー関数が必要です

コードを見てみましょう

function Aaron(List, callback) {
    setTimeout(function() {
      var task = List.shift();
      task(); //执行函数
      if (task.length > 0) {  //递归分解
        setTimeout(arguments.callee, 1000)
      } else {
        callback()
      }
    }, 25)
  }
  Aaron([function(){
    alert('a')
  },function(){
    alert('b')
  }],function(){
    alert('callback')
  })
 
分别弹出 ‘a’ , ‘b’ ,’callback’

関数パラメータのセットを渡し、それらを再帰的に解析し、それらを 1 つずつ実行するのが原則です。 setTimeoutを使うと関数を実行する前にキューの最後に追加することができます

****でもこうやって書くのは面倒ですか? *****

jQuery が提供するメソッドに切り替えましょう

var callbacks = $.Callbacks();
  callbacks.add(function() {
    alert('a');
  })
  callbacks.add(function() {
    alert('b');
  })
  callbacks.fire(); //输出结果: 'a' 'b'

これははるかに便利で、コードは非常に明確なので、これは多目的コールバック関数リスト オブジェクトであり、管理に強力なメソッドを提供しますコールバック関数キュー。

いくつかの便利な処理パラメータも提供します

once: このコールバック リスト (.fire()) が 1 回だけ実行されるようにします (遅延 Deferred のように)。

memory: このリストに追加される前の値を保持します。呼び出されたコールバック (Deferred など) は、その背後にある最新の値を使用して即座に実行されます。

unique: 一度に 1 つのコールバックのみを追加できるようにします (したがって、リスト内に重複したコールバックは存在しません)。コールバックの場合は false 呼び出し

var callbacks = $.Callbacks('once');
  callbacks.add(function() {
    alert('a');
  })
  callbacks.add(function() {
    alert('b');
  })
  callbacks.fire(); //输出结果: 'a' 'b'
  callbacks.fire(); //未执行

を中断する機能は、コールバック キューを 1 回だけ実行することです

コールバック モード

デフォルト モード: コールバック列のコールバックはデフォルトで複数回実行でき、コールバック関数は繰り返し追加できます。ただし、実行中、新しく追加されたコールバックは実行されません。

once: 列内の各コールバックは最大 1 回実行できます。実行が完了すると、コールバック関数列はクリアされます。

memory: コールバックの実行プロセス中に、新しいコールバックが追加された場合、新しいコールバックも実行できます。

ユニーク: 同じコールバックを繰り返し追加することはできません。

stopOnFalse: 特定のコールバックが false を返した場合、メモリ モードであっても後続のコールバックは実行されません。

var callbacks = $.Callbacks("once memory");

コールバックの実行順序

コールバックは配列に保存され、for ループを通過するため、列内のコールバックは追加された順序で実行され、通常は最後に追加されたコールバックが最後に実行されます。

// Fire the items on the list
var foo = function( value ) {
  console.log( "foo:" + value );
};
// Add another function to the list
var bar = function( value ){
  console.log( "bar:" + value );
};
var callbacks = $.Callbacks();
callbacks.add( foo );
callbacks.add( bar);
callbacks.fire("hello"); 
// output: foo: hello
// output: bar: hello

唯一の例外は、マークがメモリであり、 fire() が以前に呼び出された場合、 add() によって追加された後、前の fire のパラメータを使用して新しいコールバックがすぐに実行されます。ただし、fire() または fireWith() が使用されていない場合、add() の前に fire() によって呼び出されたコールバックはすぐには再実行されません。

その他の重要なポイント

コールバック関数内でCallbacksのfire()またはfireWith()を呼び出します

コールバック内でCallbacksオブジェクトのfire()またはfireWith()メソッドが呼び出される状況があります。この場合、どうすればよいでしょうか?

Jquery はこれを行います。コールバックで fire() または fireWith() が呼び出されたとき、Callbacks オブジェクトは fire() または fireWith() のパラメーターを保存するだけで、列内のコールバックをすぐには実行しません。コールバック内のすべてのコールバックが実行された後、新しいパラメータを使用して Callbacks オブジェクト内のすべてのコールバックを再実行します。

注: マークが 1 回の場合、コールバックで fire または fireWith() を実行しても効果はありません。

function fn1( value ){
   console.log( value );
 
   if (value == "bar!") return false;
 
   callbacks.fire("bar!");
}
 
function fn2( value ){
  console.log( "fn2 says: " + value);
}
 
var callbacks =$.Callbacks("stopOnFalse");
 
callbacks.add( fn1 );
callbacks.add( fn2 );
 
// Outputs: foo!
// Outputs: fn2 says:foo!
// Outputs: bar!
callbacks.fire("foo!" );

callbacks.disable()を呼び出した後、コールバックを有効にすることができなくなります

disable()を呼び出した後、コールバック関数リストがクリアされ、fireまたはfireWithを使用するときに応答がなくなります。したがって、コールバックはすべてクリアされており、再度有効にする必要がないため、コールバックには有効メソッドがありません。


callbacks.lock()

コールバック列はロックされており、callbacks.fire() または callbacks.fireWith() の呼び出しは無効になります。

callbacks.lock() がコールバックで呼び出される場合、注意すべきことが 1 つあります:

コールバックにはメモリ タグがあります。現在の fire() または fireWith() メソッドで実行されないコールバックは引き続き実行されます。ただし、コールバック内のコールバックは引き続き実行され、callbacks.fire() も callbacks.fireWith() も機能しなくなります。

コールバックにはメモリ タグがありません。すべてのコールバックがクリアされます。これは、後続のコールバックが実行されなくなることを意味します。

奇妙なことに、コールバックはロック解除メソッドを提供していないということです。つまり、一度ロックされると、コールバックは fire() または fireWith() を呼び出す機能を永久に失います。

以上がjQuery でコールバックを使用する意味は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。