jQuery AJAX 호출이 돌아오기 전에 취소하시겠습니까?

jQuery AJAX 호출이 돌아오기 전에 취소하시겠습니까?

jQuery 대화상자가 열리면 AJAX가 호출됩니다.대화상자가 닫히거나 취소 버튼을 누르면 AJAX 호출이 취소되고 콜백 기능이 호출되지 않도록 하고 싶습니다.다음과 같은 변수를 사용하여 이를 수행할 수 있는 몇 가지 방법을 생각할 수 있습니다.

  function doStuff(){
    var doCallback = true;
    $('#dialog').dialog({
      title: 'Dialog Title',
      modal: true,
      buttons: {
        Cancel: function() {
          doCallback = false;
          doSomethingElse();
        }
      }
    });
    $.get('url/url/url', function(data){
      if(doCallback){
        doTheSuccessThing(data);
      }
    });
  }

하지만 왠지 기분이 나쁘고 AJAX 통화가 완료되는 것을 막지는 못합니다.진행 중인 AJAX 통화를 취소하는 기본 제공 방법이 있습니까?

여러 번 실행될 수 있는 콜백이 있지만 마지막 콜백만 사용하려는 경우 다음 패턴을 사용합니다.

var resultsXHR, resultsTimer, resultsId=0;
$('input').keyup(function(){
  clearTimeout(resultsTimer);                     // Remove any queued request
  if (resultsXHR) resultsXHR.abort();             // Cancel request in progress
  resultsTimer = setTimeout(function(){           // Record the queued request
    var id = ++resultsId;                         // Record the calling order
    resultsXHR = $.get('/results',function(data){ // Capture request in progress
      resultsXHR = null;                          // This request is done
      if (id!=resultsId) return;                  // A later request is pending
      // ... actually do stuff here ...
    });  
  },500);                                         // Wait 500ms after keyup
});

그abort()성공 콜백이 호출되는 것을 방지하는 것만으로는 충분하지 않습니다. 요청을 취소하려고 해도 콜백이 실행되는 것을 발견할 수 있습니다.이것이 바로 사용이 필요한 이유입니다.resultsId추적하여 나중에 다른 중복 콜백이 준비되면 콜백 처리를 중지하도록 합니다.

이 작업이 얼마나 일반적이고 번거로운지를 고려할 때, 다음과 같이 처리할 각 로컬 변수 이름의 고유한 세 개의 트리플릿을 작성할 필요가 없는 재사용 가능한 방식으로 마무리하는 것이 좋다고 생각합니다.

(function($){
  $.fn.bindDelayedGet = function(event,delay,url,dataCallback,dataType,callback){
    var xhr, timer, ct=0;
    return this.bind(event,function(){
      clearTimeout(timer);
      if (xhr) xhr.abort();
      timer = setTimeout(function(){
        var id = ++ct;
        xhr = $.get(url,dataCallback && dataCallback(),function(data){
          xhr = null;
          if (id==ct) callback(data);
        },dataType);
      },delay);
    });
  };
})(jQuery);

// In action
var inp = $('#myinput').bindDelayedGet('keyup',400,'/search',
  function(){ return {term:inp.val()}; },
  'html',
  function(html){ $('#searchResults').clear().append(html); }
);

당신은 위의 코드에 대해 더 자세히 논의한 것을 제 웹사이트에서 찾을 수 있습니다.

좋아요, 그래서 $.get 함수가 반환한 XmlHttpRequest 개체를 사용하자는 제안을 바탕으로 다음과 같이 생각해냈습니다.

function doStuff(){
    var ajaxRequest = $.ajax({
                        url : 'url/url/url',
                        type : "GET",
                        success : function(data){
                          ajaxRequest = null;
                          doSuccessStuff(data);
                        }
                      });

    $('#dialog').dialog({
      title: 'Stuff Dialog',
      bgiframe: true,
      modal: true,
      buttons: {
        Cancel: function() {
          if (ajaxRequest)
            ajaxRequest.abort();
          doCancelStuff();
        }
      }
    });
  }

그것은 효과가 있는 것 같고 제가 보기에 더 깨끗해요.

jQuery에는 메서드가 없지만 jQuery get/post/ajax 함수에서 반환된 XmlHttpRequest 개체만 사용할 수 있습니다.

jQuery 블로그에서:

// Perform a simple Ajax request
var req = $.ajax({
  type: "GET",
  url: "/user/list/",
  success: function(data) {
    // Do something with the data...
    // Then remove the request.
    req = null;
  }
});

// Wait for 5 seconds
setTimeout(function(){
  // If the request is still running, abort it.
  if ( req ) req.abort();
}, 5000);

그런 것 같습니다만, 한 번도 해본 적이 없습니다.

$.get반환합니다.XmlHttpRequest객체, 그것은 가지고 있습니다.abort()호출할 수 있는 방법.한 번 해볼까요?

만약 당신이 ajax 스크립트에 조건부로 당신이 html을 출력하는 조건으로, 그렇지 않으면 아무것도 출력하지 않는 조건부로, 당신은 다음과 같은 성공 함수를 체크할 때 간단한 일을 할 수 있습니다.

$.ajax({
      type: "GET",
      url: "url.php",
      data: "data="+data,
      success: function(html)
          { 
              if(html){
              $("#container").empty().html(html);
              }
      }
});

이 예제에서 url.dll은 다음과 같이 보일 수 있습니다.

$data = $_GET['data'];

if($data=="whatever"){
     echo "<div>Hello</div>";
}else{}

이것은 저에게 효과가 있었습니다.이 게시물이 오래된 것은 알지만 누군가에게 도움이 되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/1434519/cancel-a-jquery-ajax-call-before-it-returns