최적의 제어를 위해 Ajax 요청 순서를 지정하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-10-20 12:32:02
원래의
612명이 탐색했습니다.

How to Sequence Ajax Requests for Optimal Control?

Ajax 요청 순서 지정

컬렉션을 반복하고 각 요소에 대해 개별 Ajax 호출을 수행할 때 순서를 제어하는 ​​것이 필수적입니다. 서버 과부하 및 브라우저 정지를 방지합니다. 사용자 정의 반복자를 사용할 수 있지만 더 우아한 솔루션도 사용할 수 있습니다.

jQuery 1.5 >

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 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php
이전 기사:Google Chrome의 Console.log()에서 배열 및 객체에 대한 일관되지 않은 동작이 발생하는 원인은 무엇입니까? 다음 기사:ES6 클래스는 정말로 JavaScript의 프로토타입 패턴의 더 아름다운 버전에 불과합니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
관련 주제
더>
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿