jQuery 소스코드 분석 참고사항 (7) Queue_jquery

각 요소에는 여러 개의 대기열이 있을 수 있지만 기본적으로 기본 fn 대기열인 하나만 사용됩니다. 대기열을 사용하면 프로그램을 차단하지 않고 일련의 함수를 비동기적으로 호출할 수 있습니다. 예: $("#foo").slideUp().fadeIn(); 사실 이것은 우리 모두가 일반적으로 사용하는 체인 호출입니다. 따라서 대기열은 지연된 대기열과 유사하며 내부 인프라입니다. SlideUp이 실행 중이면 fadeIn이 fx 대기열에 배치됩니다. SlideUp이 완료되면 대기열에서 꺼내어 실행됩니다. 대기열 기능을 사용하면 이러한 호출 체인의 동작을 직접 조작할 수 있습니다. 동시에 queue는 fx queue에 국한되지 않고 다른 기능을 얻기 위해 queue 이름을 지정할 수 있습니다.

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

// 일반 사용법:
$ ("# foo").slideUp(function() {
alert("애니메이션 완료.");
})
// 다음과 동일:
$("#foo"). SlideUp() ; // 콜백을 제공하지 않고 이벤트만 트리거합니다.
$("#foo").queue(function() { // 콜백 함수 추가
alert("애니메이션 완료.") ;
$( this).dequeue(); // 대기열에서 제거되어야 하며, 그러면 대기열의 다음 함수가 호출될 수 있습니다.
})

queue는 내부적으로 데이터 또는 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, undefine, true)
if(data) {
if (!q || jQuery.isArray(data)) {
q = jQuery.data(elem, type, jQuery.makeArray(data), true)
} else {
q.push (data ); //
}
}
return q ||
}
}
queue: function(elem, type) { type = type || " fx"; // 이 큐 가져오기 var queue = jQuery.queue(elem, type), // 요소 큐 제거 fn = queue.shift(), defer;// "inprogress" sentry
if( 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); 유형, "대기열");
}
}