jquery1.83_jquery 이전의 비동기 대기열과 관련된 모든 모듈에 대한 자세한 소개

jQuery在1.5引入了Deferred对象（异步列队），当时它还没有划分为一个模块，放到核心模块中。直到1.52才分割出来。它拥有三个方法:_Deferred， Deferred与when。

出于变量在不同作用域的共用，jQuery实现异步列队时不使用面向对象方式，它把_Deferred当作一个工厂方法，返回一个不透明的函数列队。之所以说不透明，是因为它的状态与元素都以闭包手段保护起来，只能通过列队对象提供的方法进行操作。这几个方法分别是done(添加函数)，resolveWith（指定作用域地执行所有函数），resolve（执行所有函数），isResolved（判定是否已经调用过resolveWith或resolve方法），cancel（中断执行操作）。但_Deferred自始至终都作为一个内部方法，从没有在文档中公开过。

Deferred在1.5是两个_Deferred的合体，但1+1不等于2，它还是做了增强。偷偷爆料，Deferred本来是python世界大名鼎鼎的Twisted框架的东西，由早期七大JS类库中的MochiKit取经回来，最后被dojo继承衣钵。jQuery之所以这样构造Deferred，分明不愿背抄袭的恶名，于是方法改得一塌糊涂，是jQuery命名最差的API，完全不知所云。它还加入当时正在热烈讨论的promise机制。下面是一个比较列表：

dojo	jQuery	注解
addBoth	then	同时添加正常回调与错误回调
addCallback	done	添加正常回调
addErrback	fail	添加错误回调
callback	done	执行所有正常回调
errback	reject	执行所有错误回调
	doneWith	在指定作用域下执行所有正常回调，但dojo已经在addCallback上指定好了
	rejectWith	在指定作用域下执行所有错误回调，但dojo已经在addErrback上指定好了
	promise	返回一个外界不能改变其状态的Deferred对象（外称为Promise对象）

jQuery의 when 메소드는 콜백 콜백을 구현하는 데 사용됩니다. 즉, 여러 다른 대기열이 실행된 후에만 다른 콜백이 실행됩니다. 이러한 최신 콜백은 done, when 및 failure를 사용하여 추가되지만 when에서 반환된 개체에는 사용자가 실행을 제어할 수 있는 기능이 추가되었습니다. 현재로서는 콜백을 추가하고 사용자가 상태를 엿볼 수 있도록 허용하는 역할만 담당하는 Promise라는 것이 있기 때문입니다. 이전 콜백이 트리거되면 자연스럽게 일반 콜백 대기열(지연, Deferred 메서드 정의 참조) 또는 오류 콜백 대기열(failDeferred)에 들어갑니다. 하지만 이렇게 말하면 비동기 프로그래밍 경험이 없는 사람들에게는 확실히 혼란스럽게 들릴 것입니다. 예시를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

$.when({aa:1} , {aa :2}).done(function(a,b){
console.log(a.aa)
console.log(b.aa)
})

1,2를 직접 출력합니다. 두 개의 함수가 전달되면 두 개의 함수가 반환됩니다. 따라서 일반 데이터 유형의 경우 done 및 failure 메서드의 콜백에는 이전 When의 매개변수 수만큼 매개변수가 포함됩니다.

코드 복사 코드는 다음과 같습니다.

function fn(){
return 4;
}
함수 로그{
window.console && console.log
}
$.when( { 숫자:1 }, 2, '3' , fn( ) ).done(함수(o1, o2, o3, o4){
log(o1.num);
log(o2);
log(o3);
log( o4);
});

각각의 비동기 결과를 얻으려면 Resolve, ResolveWith, RejectWith를 사용하여 전달해야 합니다.

코드 복사 코드는 다음과 같습니다.

var log = function(msg){
window .console && console.log(msg)
}
function asyncThing1(){
var dfd = $.Deferred()
setTimeout(function(){
log( 'asyncThing1이 완료된 것 같습니다...');
dfd.resolve('1111')
},1000)
return dfd.promise()
} asyncThing2() {
var dfd = $.Deferred();
setTimeout(function(){
log('asyncThing2가 완료된 것 같습니다...');
dfd.resolve(' 222') ;
},1500);
return dfd.promise();
}
function asyncThing3(){
var dfd = $.Deferred()>setTimeout (function( ){
log('asyncThing3이 완료된 것 같습니다...');
dfd.resolve('333');
},2000)
return dfd.promise( );
}
/* 수행 */
$.when( asyncThing1(), asyncThing2(), asyncThing3() ).done(function(res1, res2, res3){
log ('all done!');
log(res1 ', ' res2 ', ' res3);
})


초기에는 누구도 사용하지 않은 비동기 큐입니다. 지금은 아무도 사용하지 않고, 개념이 너무 추상적이고, 메소드 이름도 형편없기 때문에 내부적으로만 제작 및 판매가 가능합니다. 가장 먼저 만져야 할 것은 대기열입니다. 대기열 모듈은 커뮤니티의 관심을 끌기 위해 설계된 버전 1.4의 지연 플러그인으로 데이터 모듈과 특별히 차별화되는 반면, 데이터는 이벤트와 모듈식으로 분리됩니다. 사용자가 기존 API의 한계에 만족하지 못하기 때문에 항상 새로운 jQuery 모듈이 탄생합니다. 최초 대기열 모듈의 소스 코드:

코드 복사 코드는 다음과 같습니다.

jQuery.extend({
queue: function( elem, type, data ) {
if ( !elem ) {
return;
}
type = (type || "fx") "queue";
var q = jQuery.data( elem, type )
// 단순한 조회인 경우 신속하게 빠져나가서 대기열 제거 속도를 높입니다.
if ( !data ) {
return q || [];
}
if ( !q || jQuery.isArray(data) ) {
q = jQuery.data( elem, type, jQuery.makeArray( data) ); else {
q.push( data );
}
return q;
},
dequeue: function( elem, type ) {
type = type || "fx";
var queue = jQuery.queue( elem, type ), fn = queue.shift()
// fx 대기열이 제거되면 항상 진행 센티넬
if ( fn === "inprogress" ) {
fn = queue.shift();
}
if ( fn ) {
// fx 대기열을 방지하기 위해 진행 센티널을 추가합니다.
// 자동으로 대기열에서 제거됨
if ( type === "fx" ) {
queue.unshift("inprogress")
}
fn.call(elem, function( ) {
jQuery.dequeue(elem, type)
})
}
}
});
jQuery.fn.extend({
queue: function( type, data ) {
if ( typeof type !== "string" ) {
data = type;
type = " fx";
}
if ( data === undefine ) {
return jQuery.queue( this[0], type );
}
return this.each(function( i , elem ) {
var queue = jQuery.queue( this, type, data )
if ( type === "fx" && queue[0] !== "inprogress" ) {
jQuery .dequeue( this, type );
}
});
},
dequeue: function( type ) {
return this.each(function() {
jQuery. dequeue( this, type );
});
},
// 허가를 받아 Clint Helfers의 플러그인을 기반으로 함
// http://blindsignals.com/index. php/2009/07/jquery-delay/
delay: function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[time] || time : time; type || "fx";
return this.queue( type, function() {
var elem = this;
setTimeout(function() {
jQuery.dequeue( elem, type );
}, 시간 );
});
},
clearQueue: function( type ) {
return this.queue( type || "fx", [] ); >}
});


1.6添加了_mark,_unmark,promise.queue是让函数同属一个队伍里face,目的是让动画一个接一个执行。_mark则是让它们各自拥有队伍，并列执行(虽然)它们只记录异步列队中已被执行的函数个数)。 약속합니다画)。

复代码码 代码如下:queueDataKey = 유형 "queue",
markDataKey = 유형 "mark",
defer = jQuery.data( elem, deferDataKey, unundefined, true )
if ( defer &&
( src === "큐" || !jQuery.data( elem, queueDataKey, 정의되지 않음, true ) ) &&
( src === "mark" || !jQuery.data( elem, markDataKey, 정의되지 않음 , true ) ) ) {
// 하드 코딩된 콜백이 먼저 실행되도록 공간을 제공하고
// 결국 요소에 다른 항목을 표시/대기열에 넣습니다.
setTimeout( function() {
if ( !jQuery.data( elem, queueDataKey, 정의되지 않음, true ) &&
!jQuery.data( elem, markDataKey, undefed, true ) ) {
jQuery.removeData( elem, deferDataKey, true
defer; .resolve();
}
}, 0 );
}
}
jQuery.extend({
_mark: function( elem, type ) {
if ( elem ) {
type = (type || "fx") "mark";//创建一个以mark为后缀的字段，用于记录此列队中个数
jQuery.data( elem, 유형, (jQuery.data(elem,type,undefine,true) || 0) 1, 참 );
}
},
_unmark: function( force, elem, type ) {
if ( force !== true ) {
type = elem;
요소 = 힘;
강제 = 거짓;
}
if ( elem ) {
type = type || "FX";
var 키 = "mark" 입력,
//让个数减1,如果第一个参数为true,就强逼减至0
count = force ? 0 : ( (jQuery.data( elem, 키, 정의되지 않음, true) || 1 ) - 1 );
if ( count ) {
jQuery.data( elem, key, count, true );
} else {//如果为0，就移除它
jQuery.removeData( elem, key, true );
handleQueueMarkDefer( elem, type, "mark" );
}
}
},
queue: function( elem, type, data ) {
if ( elem ) {
type = (type || "fx") "queue ";
var q = jQuery.data( elem, 유형, 정의되지 않음, true );
// 단순한 조회인 경우 빨리 나가서 대기열 제거 속도를 높이세요.
if ( data ) {
if ( !q || jQuery.isArray(data) ) {
q = jQuery. data( elem, type, jQuery.makeArray(data), true );
} else {
q.push( 데이터 );
}
}
q를 반환 || [];
}
},
큐 제거: 함수( elem, 유형 ) {
유형 = 유형 || "FX";
var queue = jQuery.queue( elem, type ),
fn = queue.shift(),
defer;
// fx 대기열이 대기열에서 제거되면 항상 진행 센티널을 제거하세요.
if ( fn === "inprogress" ) {
fn = queue.shift();
}
if ( fn ) {
// fx 대기열이 삭제되는 것을 방지하기 위해 진행 센티널을 추가합니다
// 자동으로 대기열에서 제거됩니다
if ( type === "fx" ) {
queue.unshift("진행 중");
}
fn.call(elem, function() {
jQuery.dequeue(elem, type);
});
}
if ( !queue.length ) {
jQuery.removeData( elem, type "queue", true );
handleQueueMarkDefer( elem, type, "queue" );
}
}
});
jQuery.fn.extend({
queue: function( type, data ) {
if ( typeof type !== "string" ) {
data = type;
type = " fx";
}
if ( 데이터 === 정의되지 않음 ) {
return jQuery.queue( this[0], type );
}
return this.each(function() {
var queue = jQuery.queue( this, type, data );
if ( type === "fx" && queue[0] !== "inprogress" ) {
jQuery.dequeue( this, type );
}
});
},
dequeue: function( type ) {
return this.each(function() {
jQuery.dequeue( this ),
});
},
// 허가를 받아 Clint Helfers의 플러그인을 기반으로 함
// http://blindsignals.com/index.php/2009 /07/jquery-delay/
delay: function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[time] || time : time; "fx";
return this.queue( type, function() {
var elem = this;
setTimeout(function() {
jQuery.dequeue( elem, type );
}, 시간 );
});
},
clearQueue: function( type ) {
return this.queue( type || "fx", [] ),
//把jQuery对象装进一个异步列队, 允许它在一系列动画中再执行后绑定的回调
약속: function( type, object ) {
if ( typeof type !== "문자열" ) {
객체 = 유형;
유형 = 정의되지 않음;
}
유형 = 유형 || "FX";
var defer = jQuery.Deferred(),
elements = this,
i = elements.length,
count = 1,
deferDataKey = type "defer",
queueDataKey = 유형 "큐",
markDataKey = 유형 "마크";
functionsolve() {
if ( !( --count ) ) {
defer.resolveWith( elements, [ elements ] );
}
}
while( i-- ) {
//如果它之前已经使用过unmark, queue等方法，那么我们将生成一个新的Deferred放进缓存系统
if (( tmp = jQuery.data( elements[ i ], deferDataKey, undefine, true ) ||
( jQuery.data( elements[ i ], queueDataKey, undefine, true ) ||
jQuery.data( elements[ i ], markDataKey, undefine, true ) ) &&
jQuery.data( elements[ i ], deferDataKey, jQuery._Deferred(), true ) )) {
count ;
tmp.done( 해결 );
}
}
해결();
return defer.promise();
}
});
})( jQuery );

jQuery.ajax 모듈도 $.

코드 복사 코드는 다음과 같습니다.

deferred = jQuery.Deferred(),
completeDeferred = jQuery._Deferred(),
jqXHR ={/**/}
//....
deferred.promise( jqXHR )
jqXHR.success = jqXHR.done ;
jqXHR.error = jqXHR.fail;
jqXHR.complete = CompleteDeferred.done;

jQuery1.7은 실제로는 지연된 모듈과 구별됩니다. 이전 _Deferred 버전의 향상, 중복 제거 추가, 잠금, false 반환 시 다음 콜백 실행 중단, 지우기 및 기타 기능.

코드 복사 코드는 다음과 같습니다.

(function( jQuery ) {
// 문자열을 객체 플래그 형식으로 캐시
var flagsCache = {};
// 문자열 형식의 플래그를 객체 형식의 플래그로 변환하고 다음 위치에 저장합니다. 캐시
function createFlags( flags ) {
var object = flagsCache[ flags ] = {},
i, length
flags = flags.split( /s / )
for ( i = 0, length = flags.length; i < length; i ) {
object[ flags[i] ] = true
return object;
* 다음 매개변수를 사용하여 콜백 목록을 만듭니다.
*
* 플래그:
* 콜백 목록의 작동 방식을 변경하는 공백으로 구분된 플래그의 선택적 목록
*
* 기본적으로 콜백 목록은 이벤트 콜백 목록처럼 작동하며
* 여러 번 "실행"될 수 있습니다.
*
* 가능한 플래그:
*
* 한 번: 콜백 목록은 한 번만 실행될 수 있습니다(예: Deferred)
*
* 메모리: 이전 값을 추적하고 추가된 모든 콜백을 호출합니다.
* 목록이 최신 " 기억됨"
* 값(예: Deferred)
*
* 고유: 콜백이 한 번만 추가될 수 있도록 보장합니다(목록에 중복 없음)
*
* stopOnFalse: 호출 중단 콜백이 false를 반환할 때
*
*/
jQuery.Callbacks = function( flags ) {
// 플래그를 문자열 형식에서 객체 형식으로 변환
// (체크인합니다) 캐시 먼저)
flags = flags ? ( flagsCache[ 플래그 ] || createFlags( 플래그 ) ) : {};
var // 실제 콜백 목록
list = [],
// 반복 가능한 목록에 대한 실행 호출 스택
stack = [],
// 마지막 실행 값(잊을 수 없는 경우) 목록)
메모리,
// 목록이 현재 실행 중인지 알 수 있는 플래그
fireing,
// 실행에 대한 첫 번째 콜백(add 및 fireWith에서 내부적으로 사용됨)
fireingStart,
// 실행 시 루프 종료
firingLength,
// 현재 실행 중인 콜백의 인덱스(필요한 경우 제거로 수정됨)
firingIndex,
// 목록에 하나 이상의 콜백 추가
add = function( args ) {
var i,
length,
elem,
type,
actual;
for ( i = 0, length = args.length; i elem = args[ i ];
type = jQuery.type( elem );
if ( type === "array" ) {
// 재귀적으로 검사
add( elem );
} else if ( type === "function" ) {
// 고유 모드가 아니고 콜백이
if ( !flags.unique || !self.has( elem )에 없는 경우 추가합니다. ) {
list.push( elem );
}
}
}
},
// 콜백 실행
fire = function( context, args ) {
args = args || [];
메모리 = !flags.memory || [컨텍스트, 인수];
발사 = 사실;
fireingIndex = FireStart || 0;
fireingStart = 0;
fireingLength = list.length;
for ( ; list && FireIndex < FireLength; FireingIndex ) {
if ( list[ FireIndex ].apply( context, args ) === false && flags.stopOnFalse ) {
memory = true; // 정지됨으로 표시
break;
}
}
발사 = false;
if ( list ) {
if ( !flags.once ) {
if ( stack && stack.length ) {
memory = stack.shift();
self.fireWith( 메모리[ 0 ], 메모리[ 1 ] );
}
} else if ( memory === true ) {
self.disable();
} else {
목록 = [];
}
}
},
// 실제 콜백 객체
self = {
// 목록에 콜백 또는 콜백 모음을 추가합니다.
add: function( ) {
if ( 목록 ) {
var length = list.length;
추가(인수);
//
// 현재 실행 배치에 콜백을 추가해야 하나요?
if ( 발사 ) {
firingLength = list.length;
// 메모리를 사용하여 실행하지 않으면
// 이전 실행이 중단되지 않는 한 즉시 호출해야 합니다.
// 실행이 중지되었습니다(stopOnFalse)
} else if( memory && memory ! == true ) {
firingStart = length;
fire( 메모리[ 0 ], 메모리[ 1 ] );
}
}
이것을 반환하세요.
},
// 목록에서 콜백 제거
remove: function() {
if ( list ) {
var args = 인수,
argIndex = 0,
argLength = args.length;
for ( ; argIndex for ( var i = 0; i if ( args[ argIndex ] === list[ i ] ) {
// FireIndex 및 FireLength 처리
if ( Fire ) {
if ( i <= FireLength ) {
firingLength--;
if ( i <= FireIndex ) {
firingIndex--;
}
}
}
// 요소 제거
list.splice( i--, 1 );
// 유니시티 속성이 있는 경우
// 이 작업은 한 번만 수행하면 됩니다.
if ( flags.unique ) {
break;
}
}
}
}
}
이것을 반환하세요.
},
// 주어진 콜백이 목록에 있는지 제어
has: function( fn ) {
if ( list ) {
var i = 0,
length = 목록.길이;
for ( ; i if ( fn === list[ i ] ) {
true를 반환합니다.
}
}
}
false를 반환합니다.
},
// 목록에서 모든 콜백 제거
empty: function() {
list = [];
이것을 돌려주세요;
},
// 목록이 더 이상 아무것도 하지 않도록 합니다.
disable: function() {
list = stack = memory = undefine;
이것을 돌려주세요;
},
// 비활성화되어 있나요?
비활성화됨: function() {
return !list;
},
// 현재 상태에서 목록을 잠급니다.
lock: function() {
stack = undefine;
if ( !memory || memory === true ) {
self.disable();
}
이것을 반환하세요.
},
// 잠겨있나요?
잠김: function() {
return !stack;
},
// 주어진 컨텍스트와 인수를 사용하여 모든 콜백 호출
fireWith: function( context, args ) {
if ( 스택 ) {
if ( 실행 ) {
if ( !flags.once ) {
stack.push( [ context, args ] );
}
} else if ( !( flags.once && 메모리 ) ) {
fire( context, args );
}
}
이것을 반환하세요.
},
// 주어진 인수로 모든 콜백 호출
fire: function() {
self.fireWith( this, 인수 );
이것을 돌려주세요;
},
// 콜백이 이미 한 번 이상 호출되었는지 확인하려면
fired: function() {
return !!memory;
}
};
본인 반환;
};
})( jQuery );

这期间有还个小插曲，jQuery团队还想增加一个叫Topic的模块，内置发布者订阅者机机机机机机但这封装太溥了，结果被否决。
sliceTopic = [].slice; jQuery.Topic = function( id ) { var 콜백, 메서드, topic = id && topic[ id ] if ( ! topic ) { callbacks = jQuery.Callbacks();

topic = {

publish: callbacks.fire,
subscribe: callbacks.add,
unsubscribe: callbacks.remove
} ;
if ( id ) {
topics[ id ] = topic
}
}
return topic
}; : function( id ) {
var topic = jQuery.Topic( id ),
args = SliceTopic.call( 인수, 1 )
topic.subscribe.apply( topic, args ); return {
topic: topic,
args: args
},
unsubscribe: function( id ) {
var topic = id && id.topic || 주제( id );
topic.unsubscribe.apply( topic, id && id.args ||
sliceTopic.call( 인수, 1 ) )
},
게시: 함수( id ) {
var topic = jQuery.Topic( id );
topic.publish.apply( topic, SliceTopic.call( 인수, 1 ) );
}
});
})( jQuery );


虽然把大weight 代码移动 콜백, 但1.7의 Deferred却一点没有没变小, 它变得更重型, 它由三个函数列队组成了.并且返回的是약속对象，比原来多流了파이프, 상태, 진행률, 항상方。ajax那边就变成这样：




复主代码


代码如下:


deferred = jQuery.Deferred(),
completeDeferred = jQuery.Callbacks( "한 번 메모리" ),
deferred.promise( jqXHR );

jqXHR.success = jqXHR.done;
jqXHR.error = jqXHR.fail;
jqXHR.complete = CompleteDeferred.add;

queue那边也没变多少。

复代码

代码如下:

(function( jQuery ) {
function handlerQueueMarkDefer( elem, type, src ) {
var deferDataKey = 유형 "defer",
queueDataKey = 유형 "queue",
markDataKey = type "mark",
defer = jQuery._data( elem, deferDataKey )
if ( defer &&
( src === "queue" || !jQuery._data(elem, queueDataKey) ) &&
( src === "mark" || !jQuery._data(elem, markDataKey) ) ) {
// 하드 코딩된 콜백이 먼저 실행되도록 공간을 제공하고
// 결국에는 표시/
setTimeout( function() {
if ( !jQuery._data( elem, queueDataKey ) &&
!jQuery._data( elem, markDataKey ) ) {
jQuery.removeData 요소에 다른 것을 대기열에 넣습니다. ( elem, deferDataKey, true );
}
}, 0 )
}
}
jQuery.extend({
_mark: function( elem, type ) {
if ( elem ) {
type = ( type || "fx" ) "mark"
jQuery._data( elem, type, (jQuery._data( elem, 유형 ) || 0) 1 )
}
},
_unmark: function( force, elem, type ) {
if ( force !== true ) {
type = elem ;
요소 = 강제
강제 = 거짓;
}
if ( elem ) {
type = type || "FX";
var 키 = "mark" 입력,
count = force ? 0 : ( (jQuery._data( elem, key ) || 1) - 1 );
if ( count ) {
jQuery._data( elem, key, count );
} else {
jQuery.removeData( elem, key, true );
handleQueueMarkDefer( elem, type, "mark" );
}
}
},
queue: function( elem, type, data ) {
var q;
if ( elem ) {
type = ( type || "fx" ) "큐";
q = jQuery._data( elem, type );
// 단순한 조회인 경우 빨리 나가서 대기열 제거 속도를 높이세요.
if ( data ) {
if ( !q || jQuery.isArray(data) ) {
q = jQuery. _data( elem, type, jQuery.makeArray(data) );
} else {
q.push( 데이터 );
}
}
q를 반환 || [];
}
},
큐 제거: 함수( elem, 유형 ) {
유형 = 유형 || "FX";
var queue = jQuery.queue( elem, type ),
fn = queue.shift(),
hooks = {};
// fx 대기열이 대기열에서 제거되면 항상 진행 센티널을 제거하세요.
if ( fn === "inprogress" ) {
fn = queue.shift();
}
if ( fn ) {
// fx 대기열이 삭제되는 것을 방지하기 위해 진행 센티널을 추가합니다
// 자동으로 대기열에서 제거됩니다
if ( type === "fx" ) {
queue.unshift( "진행 중" );
}
jQuery._data( elem, 유형 ".run", 후크 );
fn.call( elem, function() {
jQuery.dequeue( elem, type );
}, Hooks );
}
if ( !queue.length ) {
jQuery.removeData( elem, type "queue " type ".run", true );
handleQueueMarkDefer( elem, type, "queue" );
}
}
});
jQuery.fn.extend({
queue: function( type, data ) {
var setter = 2;
if ( typeof type !== "string" ) {
data = type;
type = "fx";
setter--;
}
if (args.length < setter ) {
return jQuery.queue( this[0], type ) ;
}
return data === 정의되지 않음 ?
this :
this.each(function() {
var queue = jQuery.queue( this, type, data );
if ( type === "fx" && queue[0] !== "inprogress" ) {
jQuery.dequeue( this, type )
}
});
dequeue: function( type ) {
return this.each(function() {
jQuery.dequeue( this, type );
}); 허가를 받아 Clint Helfers의 플러그인을 기반으로 합니다.
// http://blindsignals.com/index.php/2009/07/jquery-delay/
delay: function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
type = type || "fx"
return this.queue( type, function( next, Hooks ) {
var timeout(next, time );
hooks.stop = function() {
clearTimeout( timeout )
}),
clearQueue: function( type ) {
return this.queue( type || "fx", [] );
},
// 특정 유형의 대기열이 비워질 때 Promise를 확인합니다
// (fx는 기본 유형입니다)
promise: function( type, object ) {
if ( typeof type !== "string" ) {
object = type;
유형 = 정의되지 않음;
}
유형 = 유형 || "FX";
var defer = jQuery.Deferred(),
elements = this,
i = elements.length,
count = 1,
deferDataKey = type "defer",
queueDataKey = 유형 "대기열",
markDataKey = 유형 "마크",
tmp;
functionsolve() {
if ( !( --count ) ) {
defer.resolveWith( elements, [ elements ] );
}
}
while( i-- ) {
if (( tmp = jQuery.data( elements[ i ], deferDataKey, unundefined, true ) ||
( jQuery.data ( 요소[ i ], queueDataKey, 정의되지 않음, true ) ||
jQuery.data( 요소[ i ], markDataKey, 정의되지 않음, true ) ) &&
jQuery.data( 요소[ i ], deferDataKey, jQuery. 콜백( "한 번 메모리" ), true ) )) {
count ;
tmp.add( 해결 );
}
}
해결();
return defer.promise(객체);
}
});
})( jQuery );


현재 Hook 메커니즘은 실제로 jQuery 내에서 확산되었습니다. 1.5는 CSS 모듈의 cssHooks, 1.6은 속성 모듈의 attrHooks, propHooks, boolHooks, nodeHooks, 1.7은 이벤트 모듈의 fixHooks, keyHooks, mouseHooks, 1.8은 큐입니다. 모듈의 _queueHooks로 인해 큐의 무게가 마침내 감소했습니다.

코드 복사 코드는 다음과 같습니다.

코드 보기?//1.8
jQuery.extend ({
queue: function( elem, type, data ) {
var queue;
if ( elem ) {
type = ( type || "fx" ) "queue";
queue = jQuery._data( elem, type );
// 단순한 조회인 경우 빠르게 나가서 대기열 제거 속도를 높입니다.
if ( data ) {
if ( !queue | | jQuery.isArray( data) ) {
queue = jQuery._data( elem, type, jQuery.makeArray(data) )
} else {
queue.push( data );
}
큐 반환 ||
}
},
큐 제거: function( elem, type ) {
type = "fx"; var queue = jQuery.queue( elem, type ),
fn = queue.shift(),
hooks = jQuery._queueHooks( elem, type ),
next = function() {
jQuery .dequeue( elem, type );
};
// fx 대기열이 제거되면 항상 진행 센티널을 제거합니다.
if ( fn === "inprogress" ) {
fn = 대기열 .shift();
}
if ( fn ) {
// fx 대기열이 자동으로 대기열에서 제거되는 것을 방지하기 위해 진행 센티널을 추가합니다
// if ( type === " fx" ) {
queue.unshift( "inprogress" );
}
// 마지막 대기열 중지 기능 지우기
delete Hooks.stop;
fn.call( elem, next , 후크 );
}
if ( !queue.length && 후크 ) {
hooks.empty.fire();
}
},
// 공개용 아님 소비 - queueHooks 객체를 생성하거나 현재 객체를 반환합니다.
_queueHooks: function( elem, type ) {
var key = type "queueHooks"
return jQuery._data( elem, key ) || ._data( elem, key, {
empty: jQuery.Callbacks("한 번 메모리").add(function() {
jQuery.removeData( elem, type "queue", true );
jQuery .removeData( elem, key, true );
})
});
}
})
jQuery.fn.extend({
queue: function( type, data) {
var setter = 2;
if ( typeof type !== "string" ) {
data = type;
setter--; 🎜>}
if (args.length < setter ) {
return jQuery.queue( this[0], type )
}
return data === 정의되지 않음
this :
this .each(function() {
var queue = jQuery.queue( this, type, data );
// 이 큐에 대한 후크 확인
jQuery._queueHooks( this, type );
if ( type === "fx" && queue[0] !== "inprogress" ) {
jQuery.dequeue( this, type )
}
},
dequeue: function( type ) {
return this.each(function() {
jQuery.dequeue( this, type );
}),
// 허가를 받아 Clint Helfers의 플러그인을 기반으로 합니다.
// http://blindsignals.com/index.php/2009/07/jquery-delay/
지연: 함수( 시간, type) {
time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time
type = type || "fx"
return this.queue( 다음, 후크 ) {
var timeout = setTimeout( next, time );
hooks.stop = function() {
clearTimeout( timeout )
}); >},
clearQueue: function( type ) {
return this.queue( type || "fx", [] )
},
// 대기열이 실행될 때 Promise를 가져옵니다. 특정 유형
// 비어 있습니다(fx는 기본 유형입니다)
promise: function( type, obj ) {
var tmp,
count = 1,
defer = jQuery.Deferred (),
elements = this,
i = this.length,
resolve = function() {
if ( !( --count ) ) {
defer.resolveWith( elements, [ 요소 ] );
}
};
if ( typeof type !== "string" ) {
obj = type;
}
type = type || "fx";
while( i-- ) {
if ( (tmp = jQuery._data( elements[ i ], type "queueHooks" )) && tmp.empty ) {
count ;
tmp.empty.add( 해결 );
}
}
resolve()
return defer.promise( obj ); ;


동시에 애니메이션 모듈은 세 번째 대규모 재구성을 시작했으며 후크 Tween.propHooks도 있습니다. 두 개의 객체가 더 있고, Animation은 비동기 대기열을 반환하고, Tween은 이전 Fx 객체와 동일한 단일 스타일이나 속성의 변경 사항을 처리하는 데 사용됩니다. animate는 1.72에서는 거의 100줄에 달했습니다. jQuery는 후크 메커니즘과 차별화를 사용하여 몇 가지 새로운 개체를 만들고 몇 가지 거대한 메서드를 재구성합니다. 이제 매우 긴 메소드는 노드 모듈과 콜백 모듈에만 국한됩니다.




코드 복사


코드는 다음과 같습니다.

animate: function( prop, speed, easing, callback ) {
var empty = jQuery.isEmptyObject( prop ),
optall = jQuery.speed( speed, easing, callback ),
doAnimation = function() {
// 속성별 여유가 손실되지 않도록 prop 복사본에 대해 작업
var anim = Animation( this, jQuery.extend( {}, prop ), optall ) ;
// 빈 애니메이션은 즉시 해결됩니다.
if ( 비어 있음 ) {
anim.stop( true )
}
return 비어 있음 || false ?
this.each( doAnimation ) :
this.queue( optall.queue, doAnimation )
},

지금까지 모든 비동기 작업은 jQuery를 비동기 대기열의 "하위 클래스" 또는 "변형"으로 변환하는 것이 더 적합합니다. Promise나 Delay, 다양한 특수 효과 메소드를 실행한 후 domReady, animation, AJAX, jQuery 객체 등이 있습니다. 따라서 모든 비동기 작업은 약속의 보호를 받으며 비동기 프로그램은 동기화처럼 작성됩니다.