jquer의 ajaxQueue 단순 구현 code_jquery

복잡한 것은 없습니다. 배열 객체를 사용하여 Ajax 요청의 순서를 대기열에 추가하고 유지하기만 하면 됩니다. 코드는 아래와 같습니다.

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

;(function ($) {
$.ajaxQueue = {
// ajax 요청 대기열 관리
requests: new Array(),
// 대기열에 보낼 ajax 요청 추가
offer: function(options) {
var _self = this,
// Complete 및 beforeSend 메서드를 "하이재킹"하고 대기열 처리 메서드를 추가합니다. poll
xhrOptions = $.extend({}, options , {
// 요청이 완료되면 다음 요청을 보냅니다.
complete: function(jqXHR, textStatus) {
if(options.complete)
options.complete.call(this, jqXHR , textStatus);
_self.poll ()
},
// 요청이 취소되면 계속해서 다음 요청을 보냅니다.
beforeSend: function(jqXHR, settings) {
if(options.beforeSend)
var ret = options.beforeSend.call(this, jqXHR, settings);
if(ret === false) {
_self.poll()
return ret;
}
}
});
this.requests.push(xhrOptions)
if(this.requests.length == 1) {
$.ajax( xhrOptions);
}
},
//FIFO 모드에서 ajax 요청 보내기
poll: function() {
if(this.isEmpty()) {
return null;
}
var selectedRequest = this.requests.shift();
var nextRequest = this.peek()
if(nextRequest != null) {
$.ajax(nextRequest) ;
}
return receivedRequest;
},
// 대기열의 헤드에서 Ajax 요청을 반환합니다.
peek: function() {
if(this.isEmpty() ) {
return null;
}
var nextRequest = this.requests[0];
return nextRequest;
// 대기열이 비어 있는지 확인
isEmpty: function() {
return this.requests.length = = 0
}
}
})(jQuery)

사용하려면 $.ajaxQueue.offer(settings) 입니다. 설정 구성은 jQuery 문서와 일치합니다.

관심이 있으시면 내
jsFiddle 공유를 클릭하여 온라인으로 실행하고 수정하는 등의 작업을 하실 수 있습니다. 마지막에 궁금한 점이 있으시면 편하게 토론해주세요 :)