이전 요청을 완료하기 전에 새 AJAX 요청 중단

이전 요청을 완료하기 전에 새 AJAX 요청 중단

입력 변경 시 AJAX 호출을 실행하는 함수가 있습니다.

단, 이전 Ajax 콜이 완료되기 전에 함수가 다시 실행될 가능성이 있습니다.

질문입니다만, 새로운 AJAX 콜을 기동하기 전에, 이전의 AJAX 콜을 중단하려면 어떻게 하면 좋을까요.글로벌 변수를 사용하지 않습니다.(여기서 유사한 질문에 대한 답변을 참조하십시오.)

현재 코드의 JSFidle:

Javascript:

var filterCandidates = function(form){
    //Previous request needs to be aborted.
    var request = $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
            json: JSON.stringify({
                count: 1
            })
        },
        success: function(data){
            if(typeof data !== 'undefined'){
                jQuery('.count').text(data.count)
                console.log(data.count);
            }
        }
    });
};

if(jQuery('#search').length > 0){
    var form = jQuery('#search');
    jQuery(form).find(':input').change(function() {
        filterCandidates(form);
    });
    filterCandidates(form);
}

HTML:

<form id="search" name="search">
    <input name="test" type="text" />
    <input name="testtwo" type="text" />
</form>
<span class="count"></span>

 var currentRequest = null;    

currentRequest = jQuery.ajax({
    type: 'POST',
    data: 'value=' + text,
    url: 'AJAX_URL',
    beforeSend : function()    {           
        if(currentRequest != null) {
            currentRequest.abort();
        }
    },
    success: function(data) {
        // Success
    },
    error:function(e){
      // Error
    }
});

var filterCandidates = function(form){
    //Previous request needs to be aborted.
    var request = $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
            json: JSON.stringify({
                count: 1
            })
        },
        success: function(data){
            if(typeof data !== 'undefined'){
                jQuery('.count').text(data.count)
                console.log(data.count);
            }
        }
    });
    return request;
};

var ajax = filterCandidates(form);

변수에 저장한 후 두 번째 전송 전에 변수를 확인합니다.readyState및 콜abort()필요하다면

질문에 대한 코멘트에서 채택된 수용된 답변의 변형 - 이것은 내 지원서에 매우 효과적이었다.

jQuery의 $.post()를 사용합니다.

var request = null;

function myAjaxFunction(){
     $.ajaxSetup({cache: false}); // assures the cache is empty
     if (request != null) {
        request.abort();
        request = null;
     }
     request = $.post('myAjaxURL', myForm.serialize(), function (data) {
         // do stuff here with the returned data....
         console.log("returned data is ", data);
     });
}

myAjaxFunction()을 원하는 횟수만큼 호출하면 마지막 하나를 제외하고 모두 종료됩니다(내 어플리케이션에는 날짜 선택기가 있고 선택한 날짜에 따라 가격이 달라집니다). 위 코드 없이 누군가 빠르게 클릭하면 올바른 가격을 얻을 수 있는지 여부를 결정하는 동전 던지기입니다.그럼 100% 정답!)

if(typeof window.ajaxRequestSingle !== 'undefined'){
  window.ajaxRequestSingle.abort();
}

window.ajaxRequestSingle = $.ajax({
  url: url,
  method: 'get',
  dataType: 'json',
  data: { json: 1 },
  success: function (data) {
    //...
  },
  complete: function () {
    delete window.ajaxRequestSingle;
  }
});

이 코드를 사용해 보세요.

var lastCallFired=false;

var filterCandidates = function(form){

    if(!lastCallFired){
    var request = $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
            json: JSON.stringify({
                count: 1
            })
        },
        success: function(data){
            if(typeof data !== 'undefined'){
                jQuery('.count').text(data.count)
                console.log(data.count);
            }
        }
    });
        setInterval(checkStatus, 20);

    }

};

if(jQuery('#search').length > 0){
    var form = jQuery('#search');
    jQuery(form).find(':input').change(function() {
        filterCandidates(form);
    });
    filterCandidates(form);
}

var checkStatus = function(){
        if(request && request.readyState != 4){
            request.abort();
        }
    else{
        lastCallFired=true;
    }
};

언급URL : https://stackoverflow.com/questions/19244341/abort-new-ajax-request-before-completing-the-previous-one