컬렉션을 반복하고 각 요소에 대해 개별 Ajax 호출을 수행할 때 순서를 제어하는 것이 필수적입니다. 서버 과부하 및 브라우저 정지를 방지합니다. 사용자 정의 반복자를 사용할 수 있지만 더 우아한 솔루션도 사용할 수 있습니다.
jQuery 1.5 이상에서는 $.ajaxQueue() 플러그인이 있습니다. $.Deferred, $.queue() 및 $.ajax()를 활용하여 요청 순서를 관리하고 요청 완료 시 해결되는 약속을 제공합니다.
<br>(function($) {</p> <p>var ajaxQueue = $({});</p> <p>$.ajaxQueue = function( ajaxOpts ) {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var jqXHR, dfd = $.Deferred(), promise = dfd.promise(); ajaxQueue.queue( doRequest ); promise.abort = function( statusText ) { if ( jqXHR ) { return jqXHR.abort( statusText ); } var queue = ajaxQueue.queue(), index = $.inArray( doRequest, queue ); if ( index > -1 ) { queue.splice( index, 1 ); } dfd.rejectWith( ajaxOpts.context || ajaxOpts, [ promise, statusText, "" ] ); return promise; }; function doRequest( next ) { jqXHR = $.ajax( ajaxOpts ) .done( dfd.resolve ) .fail( dfd.reject ) .then( next, next ); } return promise;
};
})(jQuery);
jQuery 1.4의 경우 애니메이션 대기열을 사용하여 사용자 정의 "대기열"을 생성할 수 있습니다. 아직 실행되지 않은 경우 jQuery의 'fx' 대기열을 사용하여 대기열의 첫 번째 요청을 자동으로 시작하는 자체 $.ajaxQueue() 플러그인을 생성할 수도 있습니다.
<br>(function($) {<br> var ajaxQueue = $({});</p> <p>$.ajaxQueue = function(ajaxOpts) {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var oldComplete = ajaxOpts.complete; ajaxQueue.queue(function(next) { ajaxOpts.complete = function() { if (oldComplete) oldComplete.apply(this, arguments); next(); }; $.ajax(ajaxOpts); });
};
})(jQuery);
<br>$("#items li").each(function(idx) {<br> $.ajaxQueue({</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">url: '/echo/html/', data: {html : "["+idx+"] "+$(this).html()}, type: 'POST', success: function(data) { $("#output").append($("<li>", { html: data })); }
});
});
이렇게 하면 각 Ajax 요청이 순차적으로 실행되어 서버 로드를 원활하게 처리하고 브라우저 응답성을 유지할 수 있습니다.
위 내용은 최적의 제어를 위해 Ajax 요청 순서를 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!