jQuery AjaxQueue 개선 steps_jquery

휴일에 할 일이 없을 때 개선점을 생각해봤는데 주로 다음 세 가지 점입니다.
완전한 콜백은 jquery 1.5 이후에는 함수 배열이 될 수 있는데, 배열 순서대로 호출됩니다. .
이전 요청이 반환되지 않고 새 요청이 발행되면 이전 요청이 취소됩니다. 즉, 새 요청이 원래 요청을 "덮어씁니다".
객체지향 형식으로 작성한 후 AjaxManage를 사용하여 관리가 간편합니다.
코드는 다음과 같습니다. 자세한 내용은 댓글을 참조하세요.

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

; (function($) {
// override: 새 요청이 이전 요청을 덮어써야 하는지 여부
function AjaxQueue(override) {
this.override = !!override ;
};
AjaxQueue.prototype = {
요청: new Array(),
offer: function(options) {
var _self = this; extend({}, options, {
complete: function(jqXHR, textStatus) {
// Complete가 함수 배열인 경우를 지원합니다
if($.isArray(options.complete)) {
var funcs = options.complete;
for(var i = 0, len = funcs.length; i < len; i )
funcs[i].call(this, jqXHR, textStatus); 🎜>} else {
if(options .complete)
options.complete.call(this, jqXHR, textStatus)
}
//처리가 끝나면 다음 ajax 요청을 실행합니다. queue
_self.poll();
},
beforeSend: function(jqXHR, settings) {
if(options.beforeSend)
var ret = options.beforeSend.call(this, jqXHR, 설정);
// 현재 ajax 요청이 어떤 이유로 취소된 경우 다음 ajax 요청을 보냅니다.
if(ret === false) {
_self.poll(); >return ret
}
}
});
// 재정의가 지원되는 경우
if(this.override) {
// console.log(' go override');
this.replace(xhrOptions);
// 그렇지 않으면 대기열에 넣습니다
} else {
// console.log('go queue'); this.requests.push(xhrOptions);
if(this.requests.length == 1) {
$.ajax(xhrOptions)
}
}
},
// 이전 요청을 취소하고 새 요청 보내기
replace: function(xhrOptions) {
var prevRet = this.peek()
if(prevRet != null) {
// This 메소드는 jquery 소스 코드
prevRet.abort();
}
this.requests.shift()
this.ajax(xhrOptions));
},
// 폴링 큐 보내기 다음 요청
poll: function() {
if(this.isEmpty()) {
return null; 처리된Request = this.requests.shift();
var nextRequest = this.peek();
if(nextRequest != null) {
$.ajax(nextRequest)
}
return selectedRequest;
},
/ / 대기열의 헤드에서 요청을 반환합니다.
peek: function() {
if(this.isEmpty()) {
return null; 🎜>}
var nextRequest = this.requests[0] ;
return nextRequest;
},
// 대기열이 비어 있는지 확인
isEmpty: function() {
return this.requests.length == 0;
}
};
var queue = {}
// AjaxQueue를 관리하는 간단한 객체
var AjaxManager = {
// 새로운 ajaxQueue 생성
createQueue: function(name, override) {
return queue[name] = new AjaxQueue(override)
},
// name
에 해당하는 ajaxQueue 지우기 destroyQueue: function(name) {
if(queue[name]) {
queue[name] = null
delete queue[name]}
},
/ / 이름에 따라 해당 ajaxQueue 가져오기
getQueue: function(name) {
return ( queue[name] ? queue[name] : null)
}
}; jQuery와 관련하여 쉽게 호출할 수 있도록 짧은 이름을 지정합니다.
$.AM = AjaxManager;
})(jQuery)


사실 저도 done, failure, 항상 및 다른 구성은 약간 복잡해질 수 있으므로 지금은 간단하게 유지하세요
여기에는 두 개의 jsfiddle 페이지가 있습니다. 하나는
오버레이 효과
이고 다른 하나는
대기열 효과
입니다. , 직접 테스트하고 실행할 수 있습니다.
궁금한 점이 있으면 지적해 주세요. 감사합니다.