컬렉션을 반복하고 각 요소에 대해 순차적으로 AJAX 요청을 수행하여 서버 성능을 유지하고 브라우저 정지를 방지해야 하는 시나리오에서 어려울 수 있습니다. 이 문제를 해결하기 위한 혁신적인 접근 방식은 다음과 같습니다.
jQuery 1.5:
Deferred, queue() 및 $를 사용하는 $.ajaxQueue() 플러그인을 활용합니다. .ajax() 메커니즘. 이 플러그인은 AJAX 요청 대기열 생성을 관리하고 요청 완료 시 해결되는 약속을 제공합니다.
(function($) { // Create an empty object as the AJAX request queue var ajaxQueue = $({}); $.ajaxQueue = function(ajaxOpts) { // Define the deferred object and its promise var dfd = $.Deferred(), promise = dfd.promise(); // Enqueue the AJAX request ajaxQueue.queue(doRequest); // Add an abort method to the promise promise.abort = function(statusText) { // Abort the request if active if (jqXHR) { return jqXHR.abort(statusText); } // Remove the request from the queue var queue = ajaxQueue.queue(), index = $.inArray(doRequest, queue); if (index > -1) { queue.splice(index, 1); } // Reject the deferred dfd.rejectWith(ajaxOpts.context || ajaxOpts, [promise, statusText, ""]); return promise; }; // Define the function to execute the request function doRequest(next) { jqXHR = $.ajax(ajaxOpts) .done(dfd.resolve) .fail(dfd.reject) .then(next, next); } return promise; }; })(jQuery);
jQuery 1.4:
jQuery 1.4를 사용하는 경우 빈 개체의 애니메이션 대기열을 활용하여 AJAX 요청에 대한 사용자 정의 "대기열"을 설정할 수 있습니다.
(function($) { // Create an empty object as the AJAX request queue var ajaxQueue = $({}); $.ajaxQueue = function(ajaxOpts) { // Hold the original complete function var oldComplete = ajaxOpts.complete; // Enqueue the AJAX request ajaxQueue.queue(function(next) { // Define a complete callback to proceed with the queue ajaxOpts.complete = function() { // Execute the original complete function, if present if (oldComplete) oldComplete.apply(this, arguments); next(); // Proceed to the next request }; // Execute the request $.ajax(ajaxOpts); }); }; })(jQuery);
사용 예:
이러한 기술을 사용하면 다음을 수행할 수 있습니다. 컬렉션의 각 항목에 대한 AJAX 요청 순서를 지정하여 브라우저 잠금을 방지하면서 서버 성능을 보장합니다.
위 내용은 최적의 성능을 위해 JQuery에서 AJAX 요청을 순차적으로 실행하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!