jQuery AJAX 요청을 취소/중지하는 방법

jQuery AJAX 요청을 취소/중지하는 방법

5초마다 AJAX 요청이 있습니다하지만 문제는 AJAX 요청 전에 이전 요청이 완료되지 않으면 해당 요청을 중단하고 새로운 요청을 해야 합니다.

제 코드는 이렇습니다만, 어떻게 하면 이 문제를 해결할 수 있을까요?

$(document).ready(
    var fn = function(){
        $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

jquery ajax 메서드는 XMLHttpRequest 개체를 반환합니다.이 개체를 사용하여 요청을 취소할 수 있습니다.

XMLHttpRequest에는 요구를 취소하는 중단 메서드가 있지만, 요구가 서버에 이미 송신된 경우에는 요구를 중단해도 서버는 요청을 처리합니다.단, 클라이언트는 응답을 기다리거나 처리하지 않습니다.

xhr 오브젝트에는 요청 상태(UNSENT-0, OPENED-1, HEADES_RECEVED-2, LOADING-3 및 DONE-4)를 포함하는 readyState도 포함됩니다.이것을 사용하여 이전 요청이 완료되었는지 확인할 수 있습니다.

$(document).ready(
    var xhr;
    
    var fn = function(){
        if(xhr && xhr.readyState != 4){
            xhr.abort();
        }
        xhr = $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

서버에 요청을 할 때는 먼저 진행 상황이 늘이 아닌지(또는 해당 데이터를 가져오는지) 확인하도록 하십시오.데이터를 가져오는 경우 이전 요청을 중단하고 새 요청을 시작합니다.

var progress = null

function fn () {    
    if (progress) {
        progress.abort();
    }
    progress = $.ajax('ajax/progress.ftl', {
        success: function(data) {
            //do something
            progress = null;
        }
    });
}

조금 늦어질 수 있다는 것을 알지만, 중단 방법을 호출해도 요청이 실제로 중단되지 않는 유사한 문제가 발생하고 있습니다.대신 브라우저는 전혀 사용하지 않는 응답을 기다리고 있었습니다.이 코드로 그 문제가 해결되었습니다.

 try {
        xhr.onreadystatechange = null;
        xhr.abort();
} catch (e) {}

요청을 중단해야 하는 이유는 무엇입니까?

각 요구가 5초 이상 걸릴 경우 어떻게 됩니까?

요청과 함께 전달되는 매개 변수가 변경되지 않으면 요청을 중단하지 마십시오.예:- 이 요청은 알림 데이터를 가져옵니다.이러한 상황에서는 이전 Ajax 요청을 완료한 후에만 새로운 요청을 설정하는 것이 좋습니다.

$(document).ready(

    var fn = function(){

        $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            },

            complete: function(){setTimeout(fn, 500);}
        });
    };

     var interval = setTimeout(fn, 500);

);

jQuery: 이것을 출발점으로 사용하세요.영감으로.다음과 같이 해결했습니다. (완벽한 솔루션은 아닙니다.마지막 인스턴스를 중단하고 WIP 코드입니다)

var singleAjax = function singleAjax_constructor(url, params) {
    // remember last jQuery's get request
    if (this.lastInstance) {
        this.lastInstance.abort();  // triggers .always() and .fail()
        this.lastInstance = false;
    }

    // how to use Deferred : http://api.jquery.com/category/deferred-object/
    var $def = new $.Deferred();

    // pass the deferrer's request handlers into the get response handlers
    this.lastInstance = $.get(url, params)
        .fail($def.reject)         // triggers .always() and .fail()
        .success($def.resolve);    // triggers .always() and .done()

    // return the deferrer's "control object", the promise object
    return $def.promise();
}


// initiate first call
singleAjax('/ajax.php', {a: 1, b: 2})
    .always(function(a,b,c) {console && console.log(a,b,c);});

// second call kills first one
singleAjax('/ajax.php', {a: 1, b: 2})
    .always(function(a,b,c) {console && console.log(a,b,c);});
    // here you might use .always() .fail() .success() etc.

jquery-validate.js 를 사용할 수 있습니다.다음은 jquery-validate.js의 코드 조각입니다.

// ajax mode: abort
// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()

var pendingRequests = {},
    ajax;
// Use a prefilter if available (1.5+)
if ( $.ajaxPrefilter ) {
    $.ajaxPrefilter(function( settings, _, xhr ) {
        var port = settings.port;
        if ( settings.mode === "abort" ) {
            if ( pendingRequests[port] ) {
                pendingRequests[port].abort();
            }
            pendingRequests[port] = xhr;
        }
    });
} else {
    // Proxy ajax
    ajax = $.ajax;
    $.ajax = function( settings ) {
        var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
            port = ( "port" in settings ? settings : $.ajaxSettings ).port;
        if ( mode === "abort" ) {
            if ( pendingRequests[port] ) {
                pendingRequests[port].abort();
            }
            pendingRequests[port] = ajax.apply(this, arguments);
            return pendingRequests[port];
        }
        return ajax.apply(this, arguments);
    };
}

따라서 파라미터 모드를 ajax 요구 시 abort로 설정하기만 하면 됩니다.

참조: https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js

API를 사용합니다.에서는 request를 합니다.callApiRequest = $.get(...변수의 정의라고 해도, 곧바로 요구가 호출됩니다만, 요구는 변수로 정의되어 있습니다.되어 있는지 합니다.typeof(callApiRequest) != 'undefined' 중인 에도 마찬가지입니다.suggestCategoryRequest.state() == 'pending'둘 다 - 아, 맞다.abort()콜백이 정상적으로 실행되지 않도록 하는 요구입니다.

// We need to wrap the call in a function
callApi = function () {

    //check if request is defined, and status pending
    if (typeof(callApiRequest) != 'undefined'
        && suggestCategoryRequest.state() == 'pending') {

        //abort request
        callApiRequest.abort()

    }

    //define and make request
    callApiRequest = $.get("https://example.com", function (data) {

        data = JSON.parse(data); //optional (for JSON data format)
        //success callback

    });
}

서버/API가 요청 중단을 지원하지 않을 수 있지만(API가 일부 코드를 이미 실행한 경우에는 어떻게 합니까?), Javascript 콜백은 실행되지 않습니다.예를 들어 해시태그 입력과 같은 입력 제안을 사용자에게 제공할 때 유용합니다.

에러 콜백의 정의(요구가 중단되었을 경우 발생하는 동작)를 추가하는 것으로, 이 기능을 한층 더 확장할 수 있습니다.

로는 에서 .keypress하면 ( 송신하지 할 수 . 타임아웃을 사용하여 취소해야 하는 (일부) 요청을 전송하지 않도록 할 수 있습니다..abort().

readyState 0도 체크해야 합니다.왜냐하면 xhr.disc()를 사용하면 이 함수는 이 개체에서 readyState를 0으로 설정하고 if 체크는 항상 true - readyState !=4가 되기 때문입니다.

$(document).ready(
    var xhr;

    var fn = function(){
        if(xhr && xhr.readyState != 4 && xhr.readyState != 0){
            xhr.abort();
        }
        xhr = $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
); 

언급URL : https://stackoverflow.com/questions/4551175/how-to-cancel-abort-jquery-ajax-request