jQueryのソースコード解析メモ(7) Queue_jquery

各要素には複数のキューを持つことができますが、基本的に使用されるのは 1 つだけで、これがデフォルトの fn キューです。キューを使用すると、プログラムをブロックすることなく一連の関数を非同期に呼び出すことができます。例: $("#foo").slideUp().fadeIn(); 実際、これは私たち全員がよく使用するチェーン呼び出しです。したがって、キューは Deferred に似ており、内部インフラストラクチャです。 slideUp の実行中、fadeIn は fx キューに配置され、slideUp が完了するとキューから取り出されて実行されます。キュー機能を使用すると、この一連の呼び出しの動作を直接操作できます。同時に、キューはキュー名を指定して、fx キューに限定されない他の機能を取得できます。

コードをコピー コードは次のとおりです:

// 一般的な使用法:
$ ("# foo").slideUp(function() {
alert("アニメーションが完了しました。");
});
// 以下と同等:
$("#foo")。 slideUp() ; // コールバックは提供せず、イベントをトリガーするだけです
$("#foo").queue(function() { // コールバック関数を追加します
alert("Animation complete.") ;
$( this).dequeue() // キューから取り出される必要があります。その後、キュー内の次の関数が呼び出される可能性があります。

キューは内部でデータまたは JavaScript 配列 API を使用してデータを保存します。配列に対するプッシュおよびシフト操作は、本質的に一連のキュー API です。データを使用して任意のデータを保存できます。

コードをコピー コードは次のとおりです。

queue: function(elem, type, data ) {
if(elem) {
// デフォルトは fn
type = (type || "fx") "queue";
// データ内部 API: data(element, key) , value, pvt );
// 効率のため、ここではデータは渡されません。データが渡されない場合は、単なる get キューなので、以下の判断は必要ありません。
var q = jQuery.data(elem, type, unfineed, true) {
>if (!q || jQuery.isArray(data)) {
q = jQuery.data(elem, type, jQuery.makeArray(data), true);
} else {
q.push (data ); // Push
}
}
return q ||
}
}
dequeue: function(elem, type) { type = type || " fx"; // このキューを取得します var queue = jQuery.queue(elem, type), // 要素をデキューします fn = queue.shift(), defer; fn === "inprogress") {
fn = queue.shift();
}
if(fn) {
// 自動デキューを防ぐためにセントリーを追加します
if( type === "fx") {
queue.unshift("inprogress");
}
//
fn.call(elem, function() {
jQuery.dequeue ( elem, type);
}
if(!queue.length) {
jQuery.removeData(elem, type "queue", true);タイプ、"キュー");
}
}