prosource

크롬에서 JQuery의 Ajax 요청이 지연 및 보류 중임

probook 2023. 8. 1. 20:36
반응형

크롬에서 JQuery의 Ajax 요청이 지연 및 보류 중임

때때로 애플리케이션의 Ajax 호출(JQuery 1.8을 통해)이 장시간(때로는 최대 17분까지) "보류" 상태로 고착됩니다.구글에서 검색해봤는데 가능한 모든 솔루션이 작동하지 않았습니다.

  1. 광고 차단기가 설치되어 있지 않습니다.
  2. Chrome에서 "페이지 로드 성능 향상을 위한 네트워크 작업 예측" 플래그를 비활성화했습니다.
  3. 또한 쿼리 문자열을 Ajax 호출에 추가하여 고유하게 만들었습니다(Chrome 캐시 잠금을 비활성화함).

이 문제를 해결할 방법을 알고 계십니까?

아래 예제에서는 요청이 17분 동안 보류 중이었습니다(Fiddler를 통해 요청이 17분 후에만 전송되었음을 확인).

   GET http://www.mywebsite.com/foo/rest/publishers/1/packages?_=1421584749323    HTTP/1.1
   Host: www.mywebsite.com
   Connection: keep-alive
   Accept: application/json, text/javascript, */*; q=0.01
   X-Requested-With: XMLHttpRequest
   User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36    (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36
   Content-Type: application/json
   Referer: http://www.mywebsite.com/foo/client/home
   Accept-Encoding: gzip, deflate, sdch
   Accept-Language: en-US,en;q=0.8,he;q=0.6,ru;q=0.4
   Cookie: JSESSIONID=C668509B5AFCDEBE9C9774C4721AFB9D;
   aaassz="ddss"

참조:https://drive.google.com/file/d/0B9uQiZLJG1csNzlPcHZEWHl1Z2c/view

저는 정확히 같은 문제를 우연히 발견했습니다.사용하지 않도록 설정하자마자:

예측 서비스를 사용하여 페이지를 더 빨리 로드

고급 설정으로 이동 -> 개인 정보 -> ca. 세 번째 확인란, 모든 것이 정상적으로 작동하기 시작했습니다.오류를 재현할 수 없었습니다.

jquery/ajaxPoller는 Firefox에서 완벽하게 작동합니다.그것은 오직 크롬에 의해서만 리눅스와 윈도우에서 테스트되었습니다.

그것은 세계적인 의미에서 사용자에게 영향을 미치지 않기 때문에 완벽한 해결책은 아니지만, 아마도 당신은 나와 같은 상황에 있을 것이다 - 제한된 청중.

이거 드셔보세요.

현재 실제 작업 코드로 업데이트됨

(나만의 표준 시간대 코드를 사용했으므로 표준 시간대에 대한 참조는 용서하십시오.)

먼저 어레이를 초기화하고 요청 계산 논리 실행

var request = ( typeof request != 'undefined' && request instanceof Array ) ? request : [];
var pendingAjax = ( typeof pendingAjax != 'undefined' && pendingAjax instanceof Array ) ? pendingAjax : [];

활성 요청을 추적하려면 .ajaxStart 및 .ajaxStop을 사용합니다.

var ajaxActive = 0;
$( document ).ajaxStart(function() {
  ajaxActive++;
  document.ajaxQueueFull = ajaxActive > 5;
});
$(document).ajaxStop(function() {
  ajaxActive--;
  document.ajaxQueueFull = ajaxActive > 5;
}

새 요청을 작성하는 기능을 만듭니다.

    function ajaxRequestNew(t, u, d, s) {

        var instance = request.length + 1;
        request[instance] = $.ajax({
            method: t,
            url: u,
            data: {ajaxPost: d },
            success: s
        });
        return instance;
    }

이제 인스턴스 번호를 반환하는 요청을 만듭니다.

    var instance = ajaxRequestNew('POST', 
                                  'js/ajax_timezone.php', 
                                  { ajaxAction : "ajaxGetTimezone", 
                                    tzoffset : "0", 
                                    tztimezone: "America/New_York" },
                                    function(data) {  }
    );

$.ajax() 함수는 XMLHttpRequest 개체를 반환합니다.그래서 우리는 시간 루프를 사용하여 우리의 Ajax가 실제로 언제 전송되는지 확인하고 요청이 지연되면 다른 활성 요청을 중단합니다.

    while(request[instance] === null || (request[instance].readyState < 1 || request[instance].readyState > 4)) {
        if (document.ajaxQueueFull) {
            //abort existing requests
            $.each(request, function(i,v) {
                if (i !== instance) {
                    request[i].abort();
                }
            });
        }
    }

요청을 스택에 푸시

    pendingAjax.push(request[instance]);

요청에 대한 콜백 만들기

  var timezoneFailCallback = function(data) {
        console.log('fail');
        console.dir(data);
    };

    var timezoneSuccessCallback = function(data) {
        console.log('success');
        console.dir(data);
    };

콜백 적용 시기 사용

    $.when.apply($, pendingAjax).done( timezoneSuccessCallback ).fail( timezoneFailCallback);

당신의 앱을 위해 코드를 약간 조정해야 할 수도 있지만, 당신이 이해하기를 바랍니다.질문이 있으면 저에게 알려주세요.

저는 이것이 오래된 스레드라는 것을 알고 있지만, 이것에 대한 어떤 종류의 답을 찾기 위해 허둥대는 사람들을 위해 이것을 게시합니다.저는 이 머리 긁힌 사람도 처리해야 했습니다.제 문제는 광고 차단기가 "쿠폰"이라는 단어가 포함된 API 호출을 차단했기 때문입니다.요청을 계속 유지하면서 차단하고 있었습니다. 몇 블록이 지나면 모든 요청이 자동으로 보류 상태로 전환됩니다. 라이브 요청이 너무 많아서(약 6~7개인 것 같습니다.

크롬 주소 표시줄에 chrome://net-internals/#events를 입력하여 요청을 검사합니다.그러면 문제에 대한 더 명확한 개요를 알 수 있습니다.이를 파악하는 과정에서 촬영한 이미지 2개를 첨부합니다.

디버거 스크린샷

넷-내부 스크린샷

사용자가 서버 측을 제어하는 경우, 이는 사용자의 경우에 적용될 수 있습니다.서버의 응답 헤더에 추가 [ 'Connection' ] = 'close'입니다. 제 경우 'keep-context'가 문제의 원인이었습니다.

3일간의 두통 끝에 Myslog 트랜잭션 도중 데이터베이스 백업 기능을 호출하고 있다는 것을 깨달았습니다.

setTimeout을 사용할 수 있습니다.

사용해 보십시오.

function ReadServer() {
    handleTimeInfo = setTimeout(function run() {
        /*You function pennding server*/
        TimerInfo();
    }, 60*1000);
    

function TimerInfo(){
    handleTimeInfo = setTimeout(function run() {ReadServer();}, 60*1000);           
}

언급URL : https://stackoverflow.com/questions/28010156/stalled-and-pending-ajax-requests-by-jquery-in-chrome

반응형