복붙노트

[JQUERY] jQuery를 모든 활성 아약스 요청을 중지

JQUERY

jQuery를 모든 활성 아약스 요청을 중지

해결법

  1. 1.때마다 당신은 당신이 그것을 저장하는 변수를 사용할 수있는 아약스 요청을 만들 :

    때마다 당신은 당신이 그것을 저장하는 변수를 사용할 수있는 아약스 요청을 만들 :

    var request = $.ajax({
    type: 'POST',
    url: 'someurl',
    success: function(result){}
});

    그런 다음 요청을 중단 할 수 있습니다 :

    request.abort();

    당신은 배열 유지 보류중인 모든 아약스 요청을 추적하고 필요한 경우 중단을 사용할 수 있습니다.

  2. 2.다음 코드는 요청 목록 (수영장)을 유지하고 필요한 경우 그들 모두를 취소 할 수 있습니다. 다른 AJAX 호출하기 전에 HTML의 에 장소 베스트 만들어집니다.

    다음 코드는 요청 목록 (수영장)을 유지하고 필요한 경우 그들 모두를 취소 할 수 있습니다. 다른 AJAX 호출하기 전에 HTML의 에 장소 베스트 만들어집니다.

    <script type="text/javascript">
    $(function() {
        $.xhrPool = [];
        $.xhrPool.abortAll = function() {
            $(this).each(function(i, jqXHR) {   //  cycle through list of recorded connection
                jqXHR.abort();  //  aborts connection
                $.xhrPool.splice(i, 1); //  removes from list by index
            });
        }
        $.ajaxSetup({
            beforeSend: function(jqXHR) { $.xhrPool.push(jqXHR); }, //  annd connection to list
            complete: function(jqXHR) {
                var i = $.xhrPool.indexOf(jqXHR);   //  get index for current connection completed
                if (i > -1) $.xhrPool.splice(i, 1); //  removes from list by index
            }
        });
    })
</script>

  3. 3.그 문서 페이지에 언급 된 바와 같이 ajaxSetup를 사용하면, 올바르지 않습니다. 그것은 단지 기본값을 설정하고 일부 요청을 무시하면 혼란이있을 것이다.

    그 문서 페이지에 언급 된 바와 같이 ajaxSetup를 사용하면, 올바르지 않습니다. 그것은 단지 기본값을 설정하고 일부 요청을 무시하면 혼란이있을 것이다.

    내가 방법 늦게 파티에,하지만 단지 미래의 참조를 위해 누군가가 같은 문제에 대한 해결책을 찾고 있다면, 여기 내 이전의 대답에 크게 동일에 의해 영감을 그것에 이동,하지만, 더 완료

    // Automatically cancel unfinished ajax requests 
// when the user navigates elsewhere.
(function($) {
  var xhrPool = [];
  $(document).ajaxSend(function(e, jqXHR, options){
    xhrPool.push(jqXHR);
  });
  $(document).ajaxComplete(function(e, jqXHR, options) {
    xhrPool = $.grep(xhrPool, function(x){return x!=jqXHR});
  });
  var abort = function() {
    $.each(xhrPool, function(idx, jqXHR) {
      jqXHR.abort();
    });
  };

  var oldbeforeunload = window.onbeforeunload;
  window.onbeforeunload = function() {
    var r = oldbeforeunload ? oldbeforeunload() : undefined;
    if (r == undefined) {
      // only cancel requests if there is no prompt to stay on the page
      // if there is a prompt, it will likely give the requests enough time to finish
      abort();
    }
    return r;
  }
})(jQuery);

  4. 4.여기에 내가 현재 그 작업을 수행하기 위해 사용하고거야.

    여기에 내가 현재 그 작업을 수행하기 위해 사용하고거야.

    $.xhrPool = [];
$.xhrPool.abortAll = function() {
  _.each(this, function(jqXHR) {
    jqXHR.abort();
  });
};
$.ajaxSetup({
  beforeSend: function(jqXHR) {
    $.xhrPool.push(jqXHR);
  }
});

    참고 : underscore.js의 _.each 분명히 필요하지 존재하지만. 난 그냥 게으른 그리고 난 .each $로 변경하고 싶지 않아요 (). 8P

  5. 5.각 XHR 요청에 고유 한 ID를 지정하고 전송하기 전에 객체의 객체 참조를 저장합니다. XHR 요청 완료되면 기준 삭제.

    각 XHR 요청에 고유 한 ID를 지정하고 전송하기 전에 객체의 객체 참조를 저장합니다. XHR 요청 완료되면 기준 삭제.

    모든 요청을 언제든지 취소하려면 :

    $.ajaxQ.abortAll();

    취소 요청의 고유 ID를 돌려줍니다. 만 테스트 목적으로합니다.

    작동 기능 :

    $.ajaxQ = (function(){
  var id = 0, Q = {};

  $(document).ajaxSend(function(e, jqx){
    jqx._id = ++id;
    Q[jqx._id] = jqx;
  });
  $(document).ajaxComplete(function(e, jqx){
    delete Q[jqx._id];
  });

  return {
    abortAll: function(){
      var r = [];
      $.each(Q, function(i, jqx){
        r.push(jqx._id);
        jqx.abort();
      });
      return r;
    }
  };

})();

    필요한 경우 더 많은 기능을 추가 할 수 있습니다 단일 기능을 가진 객체를 돌려줍니다.

  6. 6.나는 여러 요청에 대해 너무 쉽게 발견했다.

    나는 여러 요청에 대해 너무 쉽게 발견했다.

    1 단계 : 페이지의 상단에 변수를 정의 :

      xhrPool = []; // no need to use **var**

    2 단계 : 모든 Ajax 요청에 설정 beforeSend :

      $.ajax({
   ...
   beforeSend: function (jqXHR, settings) {
        xhrPool.push(jqXHR);
    },
    ...

    3 단계 : 당신이 필요한 곳에 사용 :

       $.each(xhrPool, function(idx, jqXHR) {
          jqXHR.abort();
    });

  7. 7.나는 xhrPool.abortAll가 주어진 URL의 모든 보류중인 요청을 취소 할 수 있도록 위의 mkmurray 및 SpYk3HH 대답을 확장 :

    나는 xhrPool.abortAll가 주어진 URL의 모든 보류중인 요청을 취소 할 수 있도록 위의 mkmurray 및 SpYk3HH 대답을 확장 :

    $.xhrPool = [];
$.xhrPool.abortAll = function(url) {
    $(this).each(function(i, jqXHR) { //  cycle through list of recorded connection
        console.log('xhrPool.abortAll ' + jqXHR.requestURL);
        if (!url || url === jqXHR.requestURL) {
            jqXHR.abort(); //  aborts connection
            $.xhrPool.splice(i, 1); //  removes from list by index
        }
    });
};
$.ajaxSetup({
    beforeSend: function(jqXHR) {
        $.xhrPool.push(jqXHR); //  add connection to list
    },
    complete: function(jqXHR) {
        var i = $.xhrPool.indexOf(jqXHR); //  get index for current connection completed
        if (i > -1) $.xhrPool.splice(i, 1); //  removes from list by index
    }
});
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    console.log('ajaxPrefilter ' + options.url);
    jqXHR.requestURL = options.url;
});

    abortAll 이제 선택적 매개 변수로 URL을 받아 들일 수 및 해당 URL 만 계류중인 호출을 취소 할 것을 제외하고 사용법은 동일합니다

  8. 8.나는 앤디의 코드에 약간의 문제가 있었다, 그러나 그것은 나에게 몇 가지 좋은 아이디어를 주었다. 첫 번째 문제는 jqXHR가 성공적으로 완료 객체 떨어져 우리가 팝업해야했다. 나는 또한 abortAll 기능을 수정했다. 여기 내 마지막 작업 코드는 다음과 같습니다

    나는 앤디의 코드에 약간의 문제가 있었다, 그러나 그것은 나에게 몇 가지 좋은 아이디어를 주었다. 첫 번째 문제는 jqXHR가 성공적으로 완료 객체 떨어져 우리가 팝업해야했다. 나는 또한 abortAll 기능을 수정했다. 여기 내 마지막 작업 코드는 다음과 같습니다

    $.xhrPool = [];
$.xhrPool.abortAll = function() {
            $(this).each(function(idx, jqXHR) {
                        jqXHR.abort();
                        });
};
$.ajaxSetup({
    beforeSend: function(jqXHR) {
            $.xhrPool.push(jqXHR);
            }
});
$(document).ajaxComplete(function() {
            $.xhrPool.pop();
            });

    나는 일을의 ajaxComplete () 방식처럼하지 않았다. 나는 그것이 작동하지 않았다 .ajaxSetup 구성하려고 아무리.

  9. 9.나는 그것이 나를 위해 작동하는지 확인하는 코드를 업데이트 한

    나는 그것이 나를 위해 작동하는지 확인하는 코드를 업데이트 한

    $.xhrPool = [];
$.xhrPool.abortAll = function() {
    $(this).each(function(idx, jqXHR) {
        jqXHR.abort();
    });
    $(this).each(function(idx, jqXHR) {
        var index = $.inArray(jqXHR, $.xhrPool);
        if (index > -1) {
            $.xhrPool.splice(index, 1);
        }
    });
};

$.ajaxSetup({
    beforeSend: function(jqXHR) {
        $.xhrPool.push(jqXHR);
    },
    complete: function(jqXHR) {
        var index = $.inArray(jqXHR, $.xhrPool);
        if (index > -1) {
            $.xhrPool.splice(index, 1);
        }
    }
});

  10. 10.중단 제공하며 xhrPool 배열에 대한 제거 방법. 내 모자를 던지고, 그리고 것은 ajaxSetup 재정의 문제 경향이 없습니다.

    중단 제공하며 xhrPool 배열에 대한 제거 방법. 내 모자를 던지고, 그리고 것은 ajaxSetup 재정의 문제 경향이 없습니다.

    /**
 * Ajax Request Pool
 * 
 * @author Oliver Nassar <onassar@gmail.com>
 * @see    http://stackoverflow.com/questions/1802936/stop-all-active-ajax-requests-in-jquery
 */
jQuery.xhrPool = [];

/**
 * jQuery.xhrPool.abortAll
 * 
 * Retrieves all the outbound requests from the array (since the array is going
 * to be modified as requests are aborted), and then loops over each of them to
 * perform the abortion. Doing so will trigger the ajaxComplete event against
 * the document, which will remove the request from the pool-array.
 * 
 * @access public
 * @return void
 */
jQuery.xhrPool.abortAll = function() {
    var requests = [];
    for (var index in this) {
        if (isFinite(index) === true) {
            requests.push(this[index]);
        }
    }
    for (index in requests) {
        requests[index].abort();
    }
};

/**
 * jQuery.xhrPool.remove
 * 
 * Loops over the requests, removes it once (and if) found, and then breaks out
 * of the loop (since nothing else to do).
 * 
 * @access public
 * @param  Object jqXHR
 * @return void
 */
jQuery.xhrPool.remove = function(jqXHR) {
    for (var index in this) {
        if (this[index] === jqXHR) {
            jQuery.xhrPool.splice(index, 1);
            break;
        }
    }
};

/**
 * Below events are attached to the document rather than defined the ajaxSetup
 * to prevent possibly being overridden elsewhere (presumably by accident).
 */
$(document).ajaxSend(function(event, jqXHR, options) {
    jQuery.xhrPool.push(jqXHR);
});
$(document).ajaxComplete(function(event, jqXHR, options) {
    jQuery.xhrPool.remove(jqXHR);
});

  11. 11.모든 Ajax 요청의 풀을 확인하고이를 중단 .....

    모든 Ajax 요청의 풀을 확인하고이를 중단 .....

    var xhrQueue = []; 

$(document).ajaxSend(function(event,jqxhr,settings){
    xhrQueue.push(jqxhr); //alert(settings.url);
});

$(document).ajaxComplete(function(event,jqxhr,settings){
    var i;   
    if((i=$.inArray(jqxhr,xhrQueue)) > -1){
        xhrQueue.splice(i,1); //alert("C:"+settings.url);
    }
});

ajaxAbort = function (){  //alert("abortStart");
    var i=0;
    while(xhrQueue.length){ 
        xhrQueue[i++] .abort(); //alert(i+":"+xhrQueue[i++]);
    }
};

  12. 12.더 나은 독립적 인 코드를 사용합니다 .....

    더 나은 독립적 인 코드를 사용합니다 .....

    var xhrQueue = []; 

$(document).ajaxSend(function(event,jqxhr,settings){
    xhrQueue.push(jqxhr); //alert(settings.url);
});

$(document).ajaxComplete(function(event,jqxhr,settings){
    var i;   
    if((i=$.inArray(jqxhr,xhrQueue)) > -1){
        xhrQueue.splice(i,1); //alert("C:"+settings.url);
    }
});

ajaxAbort = function (){  //alert("abortStart");
    var i=0;
    while(xhrQueue.length){ 
        xhrQueue[i++] .abort(); //alert(i+":"+xhrQueue[i++]);
    }
};

  13. 13.다만 중요 : 로그 오프하고 싶은 말은 당신은 타이머와 함께 새 요청을 생성하는 : 세션 데이터는 각각의 새로운 부트 스트랩으로 갱신되기 때문에 (어쩌면 당신은 내가 드루팔을 이야기하고 말할 수 있지만, 이것은 사용하는 세션이 어떤 사이트가 될 수 있음) .. . 상단에 전역 변수를 : 나는 다른 경우에 실행되는 물건의 톤을했다 원인, 검색과 내 모든 스크립트를 통해 이동 및 대체했다 :

    다만 중요 : 로그 오프하고 싶은 말은 당신은 타이머와 함께 새 요청을 생성하는 : 세션 데이터는 각각의 새로운 부트 스트랩으로 갱신되기 때문에 (어쩌면 당신은 내가 드루팔을 이야기하고 말할 수 있지만, 이것은 사용하는 세션이 어떤 사이트가 될 수 있음) .. . 상단에 전역 변수를 : 나는 다른 경우에 실행되는 물건의 톤을했다 원인, 검색과 내 모든 스크립트를 통해 이동 및 대체했다 :

    var ajReq = [];
var canAj = true;
function abort_all(){
 for(x in ajReq){
    ajReq[x].abort();
    ajReq.splice(x, 1)
 }
 canAj = false;
}
function rmvReq(ranNum){
 var temp = [];
 var i = 0;
 for(x in ajReq){
    if(x == ranNum){
     ajReq[x].abort();
     ajReq.splice(x, 1);
    }
    i++;
 }
}
function randReqIndx(){
 if(!canAj){ return 0; }
 return Math.random()*1000;
}
function getReqIndx(){
 var ranNum;
 if(ajReq.length){
    while(!ranNum){
     ranNum = randReqIndx();
     for(x in ajReq){
    if(x===ranNum){
     ranNum = null;
    }
     }
    }
    return ranMum;
 }
 return randReqIndx();
}
$(document).ready(function(){
 $("a").each(function(){
    if($(this).attr('href').indexOf('/logout')!=-1){          
     $(this).click(function(){
    abort_all();                 
     });
    }
 })
});
// Then in all of my scripts I wrapped my ajax calls... If anyone has a suggestion for a 
    // global way to do this, please post
var reqIndx = getReqIndx();
if(reqIndx!=0){
ajReq[reqIndx] = $.post(ajax, { 'action': 'update_quantities', iids:iidstr, qtys:qtystr },  
function(data){
 //..do stuff
 rmvReq(reqIndx);
 },'json');
}

  14. 14.

    var Request = {
    List: [],
    AbortAll: function () {
        var _self = this;
        $.each(_self.List, (i, v) => {
            v.abort();
        });
    }
}
var settings = {
    "url": "http://localhost",
    success: function (resp) {
        console.log(resp)
    }
}

Request.List.push($.ajax(settings));

    모든 아약스 요청을 중단 할 때마다, 당신은 단지이 줄을 호출 할 필요가

    Request.AbortAll()

  15. 15.여기에 모든 클릭에이를 연결하는 방법 (페이지가 많은 AJAX 호출을 배치하고 다른 페이지로 이동하려는 경우에 유용합니다).

    여기에 모든 클릭에이를 연결하는 방법 (페이지가 많은 AJAX 호출을 배치하고 다른 페이지로 이동하려는 경우에 유용합니다).

    $ ->
    $.xhrPool = [];

$(document).ajaxSend (e, jqXHR, options) ->
    $.xhrPool.push(jqXHR)

$(document).ajaxComplete (e, jqXHR, options) ->
    $.xhrPool = $.grep($.xhrPool, (x) -> return x != jqXHR);

$(document).delegate 'a', 'click', ->
    while (request = $.xhrPool.pop())
      request.abort()

  16. 16.나는 모든 Ajax 요청을 취소하는 데 사용할 더미 솔루션이있다. 이 솔루션은 전체 페이지를 다시로드됩니다. 이 솔루션은 그렇지 각 Ajax 요청에 ID를 할당하는 것처럼하는 경우에 좋은, 그리고 당신이 루프 내부 아약스 요청을합니다. 이것은 확실히 모든 아약스 요청이 사망 할 것입니다.

    나는 모든 Ajax 요청을 취소하는 데 사용할 더미 솔루션이있다. 이 솔루션은 전체 페이지를 다시로드됩니다. 이 솔루션은 그렇지 각 Ajax 요청에 ID를 할당하는 것처럼하는 경우에 좋은, 그리고 당신이 루프 내부 아약스 요청을합니다. 이것은 확실히 모든 아약스 요청이 사망 할 것입니다.

    location.reload();

    17. from https://stackoverflow.com/questions/1802936/stop-all-active-ajax-requests-in-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 함께 '입력'에서 양식을 제출?  (0) 2020.10.05
[JQUERY] === 변수 정의 변수 대 대해서 typeof === "미등록"  (0) 2020.10.05
[JQUERY] jQuery로 DIV의 하단에 사용자가 스크롤 할 때 검출  (0) 2020.10.05
[JQUERY] ASP.NET 버튼 게시 jQuery를 UI와 대화  (0) 2020.10.05
[JQUERY] 어떻게 텍스트 상자의 내용을 감지하는 방법 변경  (0) 2020.10.05
,

티스토리툴바